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