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

Question

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

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

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

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

Answer 1

嗅探事件target属性的tagName可能就足够了。 下面的内容显然不是详尽无遗的——有几个边缘情况需要考虑——但这是一个开始。 尝试在表单元素中输入 when ，然后在文档中的其他地方输入：

 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>

Answer 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
    }
}