jQuery:在整个文档上触发按键功能，但不在输入和文本区域内

jQuery: trigger keypress function on entire document but not inside inputs and textareas?

本文关键字：输入 文本 区域 功能 文档 jQuery      更新时间：2023-09-26

我有这个…

$(document).keypress(function(e) {
        if ( e.keyCode === 119 ) // w
            doSomething();
    });

Wo在我的文档上按"w"时，doSomething()函数将启动。当我当前在input字段或textarea中键入（对焦）时，如何防止它触发？

您必须过滤掉事件之后的元素，而不是选择器中的元素，就像这个

$(document).on('keypress', function(e) {
    var tag = e.target.tagName.toLowerCase();
    if ( e.which === 119 && tag != 'input' && tag != 'textarea') 
        doSomething();
});

这会检查事件源自的元素event.target的标记名，并且只有当事件不是源自输入或文本区域时才会触发函数。

如果事件处理程序绑定到document，则该事件将已经在输入元素上引发并冒泡到html元素，因此必须在处理程序本身的代码中处理排除。另一种选择是为输入元素专门绑定第二个处理程序，以防止事件冒泡，但这可能不是正确的方法。

代码演示

$(function() {
    $(document).keypress(function(e) {
        if ($(e.target).is('input, textarea')) {
            return;   
        }
        if (e.which === 119) doSomething();
    });
});​

p.s.您可以查看jQuery事件对象文档，了解它公开了哪些属性。

在jQuery中，e.which是规范化的属性，而不是e.keyCode。

要检查您是否不在输入中，可以检查document.activeElement:

$(document).keypress(function(e) {
    if (e.which === 119 && !$(document.activeElement).is(":input,[contenteditable]")) {
        doSomething();
    }
});

演示。http://jsfiddle.net/pxCS2/1/

最简单和完美的解决方案是：

$(document).keypress(function(e) {
    if (e.which == 119 && !$(':focus').length) {
        doSomething();
    }
});
相关文章：