Javascript addEventListener keyDown停止输入的可编辑

Question

I've been making a game, and I want an input box beside my canvas. I have finally figured out that

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

has stopped me from being able to edit the input box

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

Any solutions where both can work? I've tried putting the addEventListener on a div surrounding the canvas' yet it still doesn't work, unless I comment out that code.

Answer 1

You can check if the element that the event was triggered on is not input.

Here is the change to your code:

 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'>