Javascript addEventListener keyDown停止输入可编辑

Question

我一直在做一个游戏，我想在我的画布旁边有一个输入框。我终于想通了，

document.body.addEventListener("keydown", function(e){ 
    e.preventDefault(); 
    keys[e.keyCode] = true; 
}); 
document.body.addEventListener("keyup", function(e){ 
    e.preventDefault(); 
    keys[e.keyCode] = false;  
}); 

已经阻止了我能够编辑输入框

<input type='text' id='input' value='asdf'> 

的任何解决方案，其中两个可以工作？ 我试图把addEventListener放在围绕 画布的div上，但它仍然不起作用，除非我将该代码注释掉。

Answer 1

您可以检查事件是否触发的元素是而不是输入。

这里是改变了代码：

var keys = {} 
 
document.body.addEventListener("keydown", function(e){ 
 
    if (e.srcElement.nodeName !== 'INPUT') { 
 
    e.preventDefault(); 
 
    keys[e.keyCode] = true; 
 
    } 
 
}); 
 
document.body.addEventListener("keyup", function(e){ 
 
    if (e.srcElement.nodeName !== 'INPUT') { 
 
    e.preventDefault(); 
 
    keys[e.keyCode] = false;  
 
    } 
 
});

<input type='text' id='input' value='asdf'>