keyup eventListener和文本输入字段

时间:2019-08-06 20:13:34

标签: javascript user-input dom-events keyboard-events

我在整个文件的键f的eventListener事件中有一个keyup事件,以使整个文档执行功能foo()

一切正常,直到我必须编辑文本字段。特别是,当我键入键f时,将执行函数foo(),当我的目的是在文本字段中键入内容时,这是不希望的。

无论如何,我是否可以绕过此eventListener,以便可以在文本字段中正常键入内容?

这是我的代码:

document.addEventListener("keyup", function(event){
event.preventDefault();
    if (event.keyCode === 70){
        foo();
    }
});


function foo(){
    console.log("Howdy world");
}
<input type="text">

2 个答案:

答案 0 :(得分:0)

尝试

<input type="text" 
    onkeydown="event.stopPropagation()" 
    onkeyup="event.stopPropagation()" 
    onkeypress="event.stopPropagation()">

那么event.stopPropagation()在这里做什么?

  

event.stopPropagation()方法停止将事件冒泡到父元素,从而阻止执行任何事件处理程序。

在这种情况下,当您键入键F时,它将首先触发input元素本身的事件侦听器,然后将事件传播到其父元素。现在,由于document也是input的祖先,因此也会触发其事件侦听器。

为防止这种情况,请在每次与输入交互时使用event.stopPropagation()。在这种情况下,事件为onkeydownonkeyuponkeypressed

答案 1 :(得分:0)

例如,您可以获得tagName中的activeElement并且不执行函数,例如:

input