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
jQuery: trigger keypress function on entire document but not inside inputs and textareas?
提问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 input
field 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 元素,因此您必须在处理程序本身的代码中处理排除。另一种方法是专门为输入元素绑定第二个处理程序,以防止事件冒泡,但这可能不是正确的方法。
$(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.which
is 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();
}
});
回答by Buzogany Laszlo
The easiest and perfect solution is:
最简单和完美的解决方案是:
$(document).keypress(function(e) {
if (e.which == 119 && !$(':focus').length) {
doSomething();
}
});