使用 Javascript，我如何检测按键事件，而不是当用户在表单字段中输入时？答案

【问题标题】：Using Javascript, how can I detect a keypress event but NOT when the user is typing in a form field?使用 Javascript，我如何检测按键事件，而不是当用户在表单字段中输入时？
【发布时间】：2021-01-20 22:33:47
【问题描述】：

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

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

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

我如何检测按键事件，但当用户碰巧在表单字段中输入时却检测不到？

【问题讨论】：

标签： javascript events onkeyup onkeypress

【解决方案1】：

嗅探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>

【讨论】：

您还应该包括TEXTAREA
@HaoWu - 绝对是一个好电话 - 我不想构建整个详尽的功能，因为我不确定用户的具体需求。包括select 也可能有意义，但此时您可能需要更聪明地迭代父节点。如果 OP 需要这个，我可能会填写示例以成为一个更完整的方法......再想一想，也许我应该无论如何都应该这样做（毕竟 OP 是芝加哥人）
@Tantalus - 另外，我没有包括您可能想要考虑的一个极端情况 - 如果用户关注 <button> 元素。取决于您正在嗅探的键以及您希望表单的行为方式。

【解决方案2】：

在您的 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
    }
}

【讨论】：