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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11807944/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 07:11:00  来源:igfitidea点击:

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

javascriptjquerykeypress

提问by matt

I have this …

我有这个 …

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

Wo when pressing "w" on my document the doSomething()function fires. How can I prevent it from firing when I'm currently typing (in focus) in an inputfield or textarea?

在我的文档上按“w”时,该doSomething()功能会触发。当我当前在input字段或 中键入(焦点)时,如何防止它触发textarea

回答by adeneo

You'll have to filter out the elements after the event and not in the selector, like this

你必须在事件之后过滤掉元素而不是在选择器中,像这样

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

this checks the tagname of the event.target, the element the event originated from, and only fires the function if the event did not originate from an input or textarea.

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

回答by nbrooks

If your event handler is bound to document, the event will have already been raised on the input element and bubbled up to the html element, so you will have to handle the exclusion within the code for the handler itself. The alternative is specifically binding a second handler for the input elements which prevents the event from bubbling, but that is probably not the right approach.

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

Code demo

代码演示

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

p.s. you can have a look at the jQuery event object documentationto see what properties it exposes.

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

回答by Esailija

In jQuery, e.whichis the normalized property, not e.keyCode.

在 jQuery 中,e.which是规范化属性,而不是e.keyCode.

To check if you are not in an input you can check the document.activeElement:

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

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

Demo. http://jsfiddle.net/pxCS2/1/

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

回答by Buzogany Laszlo

The easiest and perfect solution is:

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

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