使用Javascript，如何在用户在表单字段中键入内容时检测按键事件，但无法检测到？

如何解决使用Javascript，如何在用户在表单字段中键入内容时检测按键事件，但无法检测到？

在我的网站上，我想当用户点击问号键时动态地打开搜索表单。我可以使用以下代码做到这一点：

document.onkeyup = checkKey;
function checkKey(evt) {
    evt = evt || window.event;
    if (evt.keyCode == '191') { // user inputs the "?" key [shift + /]
        // Do something
    }
}

但是，如果用户只是在评论字段或搜索字段中输入问号，我就不想触发该操作。例如，在Gmail中，您可以点击“？”打开键盘快捷键叠加层，但是如果要编写电子邮件并键入“？”快捷方式无法打开。

当用户碰巧在表单字段中键入内容时，如何检测按键事件，但不能检测？

解决方法

嗅探事件target属性的tagName可能就足够了。以下内容显然并不详尽-需要考虑几个极端情况-但这是一个开始。尝试在表单元素中输入内容时，然后在文档其他位置集中时输入内容：

document.onkeyup = checkKey;
function checkKey(evt) {
    const formElements = ['INPUT','TEXTAREA','SELECT','OPTION'];
    evt = evt || window.event;
    if (formElements.includes(evt.target.tagName)) {
      console.log('ignore me!');
    } else {
      console.log('do something!');
    }
}

<h1>my form</h1>
<form>
  <label for="name">name</label>
  <input id="name" name="name" />
  <br/>
  <label for="aboutme">about me</label>
  <textarea id="aboutme" name="aboutme"></textarea>
  <br/>
  <label for="ghostbuster">ghostbuster</label>
  <select id="ghostbuster" name="ghostbuster">
    <option value="winstonzeddmore">Winston Zeddmore</option>
    <option value="egonspangler">Egon Spangler</option>
    <option value="petervenkman">Peter Venkman</option>
    <option value="raystanz">Ray Stanz</option>
  </select>
</form>

<p> some text</p>

,

在checkKey函数中，您可以访问事件对象。您可以检查事件的目标以确定如何处理它。在这种情况下，您可以将示例修改为如下所示：

document.onkeyup = checkKey;
function checkKey(evt) {
    evt = evt || window.event;
    if (evt.target.type === 'input') {
       return;
    }
    if (evt.keyCode == '191') { // user inputs the "?" key [shift + /]
        // Do something
    }
}