使用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进行嗅探可能就足够了。以下内容显然不是详尽无遗的——有几个边缘案例需要考虑——但这只是一个开始。尝试在表单元素中键入内容，然后在文档的其他地方键入内容：

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