如何判断textarea是否获得焦点？使用hasFocus()方法报错

嘿，我明白你遇到的困扰了——你想判断textarea是否获得焦点，尝试用hasFocus()却报错说这个方法不是元素的属性对吧？其实原因很简单：hasFocus()是Document对象（或是ShadowRoot）的方法，并不是单个DOM元素的方法，直接在input/textarea元素上调用肯定会出问题。

那正确的做法应该是借助document.activeElement来判断，它会返回当前页面中正获得焦点的元素。结合你的场景，代码可以改成这样：

const msg_area = document.getElementById('msg-area') as HTMLTextAreaElement;
// 注意：如果是textarea元素，要断言成HTMLTextAreaElement，不是HTMLInputElement哦
if (document.activeElement === msg_area) {
  // 这里写你的业务逻辑
  console.log('textarea已经获得焦点啦');
}

再补充几个实用细节：

• 如果你用的是TypeScript，一定要把元素断言成正确的类型：textarea对应HTMLTextAreaElement，普通输入框才是HTMLInputElement，类型错配可能会埋下潜在问题。
• 要是你需要实时监听焦点变化，还可以给textarea绑定focus和blur事件，这样能第一时间知道它的焦点状态：

msg_area.addEventListener('focus', () => {
  console.log('textarea聚焦了');
});

msg_area.addEventListener('blur', () => {
  console.log('textarea失去焦点了');
});

这样就能准确判断textarea是否处于聚焦状态啦～

内容的提问来源于stack exchange，提问作者Santanu