javascript - 如何引用所有 <input> 和 <textarea> 并在它们具有 :focus? 时执行操作

Question

我正在尝试使用纯Javascript来设置一个函数，该函数在按下S键并且搜索叠加层尚未打开并且在<input>内时未按下S时触发。或<textarea> 。问题出在第三个参数中，我似乎无法弄清楚。

您能告诉我如何设置 IF 语句中的第三个参数吗？

我一直在尝试获得 JQuery is() 的等价物。常规 JS 中的函数。由于我对 JS 不太了解，所以在掌握基础知识之前我会避免使用 JQuery。我创建了一个class对于 OOP，所以 this.正在引用那个。

我的 JavaScript:

keyPressControl(event) {
    if (event.keyCode == 83 && !this.isOverlayOpen && !document.querySelectorAll('input, textarea').hasFocus()) {

    this.staffSearchOpen();
    }
}

this.staffSearchOpen();当上面提到的所有三个参数都为真时应该起作用，但我只能让前两个参数正常工作。

Answer 1

问题的措辞有点令人困惑，但看起来您正在尝试排除输入字段处于焦点时发生的事件，而不是相反。

您可以将规则构建到选择器本身中，而不是“hasFocus()”:input:focus, textarea:focus:

document.addEventListener('keypress', function() {
  if (document.querySelector('input:focus, textarea:focus')) {
    console.log("keypress event was inside an input")
  } else {
    console.log("No input in focus");
  }
})

<input>
<textarea></textarea>

...所以你的函数可以是:

keyPressControl(event) {
  if (
    event.keyCode == 83 && 
    !this.isOverlayOpen &&
    !document.querySelector('input:focus, textarea:focus')
  ) {
      this.staffSearchOpen();
    }
}