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