jQuery:触发整个文档的按键功能,但不在输入和textareas内?

时间:2012-08-04 10:39:34

标签: javascript jquery keypress

我有这个......

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

在我的文档上按“w”时,doSomething()函数会触发。当我正在input字段或textarea字段中输入(焦点)时,如何防止它被触发?

4 个答案:

答案 0 :(得分:78)

您必须在事件之后过滤掉元素,而不是在选择器中,例如

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

这将检查event.target的标记名,即事件源自的元素,并且仅在事件不是来自输入或文本区域时才触发该函数。

答案 1 :(得分:13)

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

Code demo

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

P.S。您可以查看jQuery event object documentation以了解它所展示的属性。

答案 2 :(得分:5)

在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/

答案 3 :(得分:2)

最简单,最完美的解决方案是:

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