当输入处于焦点时防止按键事件触发答案

【问题标题】：Prevent keypress event trigger when input is in focus当输入处于焦点时防止按键事件触发
【发布时间】：2010-11-13 08:52:39
【问题描述】：

我目前正在使用一个开关来在按下某个键时触发一些代码。这不是确切的代码，但它基本上是我正在使用的（这只是为了在这里保持简短和简单。）

$(document).keydown(function(e) {
switch(e.keyCode) { 

case 39:
e.preventDefault();
    alert("Arrow Key");

break;

case 37:
   e.preventDefault();
    alert("Arrow Key");
}
});

当输入框处于焦点时，如何防止事件触发？

【问题讨论】：

这不起作用怎么办？你还需要打电话给e.stopPropagation()吗？

标签： javascript jquery javascript-events event-handling

【解决方案1】：

我认为您的意思是，仅当目标元素不是 input 标记时，您才想做e.preventDefault()。你可以这样做：

$(document).keydown(function(e) {
    if (e.target.nodeName.toLowerCase() !== 'input') {
        switch(e.keyCode) { 
            case 39:
                e.preventDefault();
                alert("Arrow Key");

                break;

            case 37:
                e.preventDefault();
                alert("Arrow Key");
        }
    }
});

e.target 是事件起源的元素。或者，您可以使用 jQuery 的事件委托 API：

$(document).delegate(':not(input)', 'keydown', function(e) {
    switch(e.keyCode) { 
        case 39:
            e.preventDefault();
            alert("Arrow Key");

            break;

        case 37:
            e.preventDefault();
            alert("Arrow Key");
    }
});

编辑更新了我的答案以进行“不是输入”而不是“是输入”检查。

【讨论】：

【解决方案2】：

您可以使用document.activeElement 返回当前焦点元素。

来自MDN的简要文档：

返回当前获得焦点的元素，即如果用户键入任何键，将获得击键事件的元素。该属性是只读的。

也就是说，为了防止在输入焦点时触发击键事件，当焦点元素是input时，您可以忽略击键事件处理

if (!$(document.activeElement).is("input"){ /* handle keystroke events here */ }

【讨论】：

【解决方案3】：

可能有更优雅的方式，但我会这样做：

var inputHasFocus = false;
$("#some_input_id").focusin(function () {
    inputHasFocus = true;
}).focusout(function () {
    inputHasFocus = false;
});

然后在你的案例陈述中使用它。

【讨论】：

我最初的想法是设置某种变量计数并跟踪它，但原始答案效果很好。不过谢谢你。我很感激。