JS - 如果未選擇輸入，只觸發document.onkeydown函數

我目前使用W，A，S，D鍵調用document.onkeydown函數來觸發移動功能。JS - 如果未選擇輸入，只觸發document.onkeydown函數

它工作正常使用下面的代碼：

document.onkeydown = function(event){ 
    if(event.keyCode === 68){ 
     socket.emit('keyPress', {inputId: 'right', state: true}); 
    } 
    else if(event.keyCode === 83){ 
     socket.emit('keyPress', {inputId: 'down', state: true}); 
    } 
    else if(event.keyCode === 65){ 
     socket.emit('keyPress', {inputId: 'left', state: true}); 
    } 
    else if(event.keyCode === 87){ 
     socket.emit('keyPress', {inputId: 'up', state: true}); 
    } 
} 

document.onkeyup = function(event){ 
    if(event.keyCode === 68){ 
     socket.emit('keyPress', {inputId: 'right', state: false}); 
    } 
    else if(event.keyCode === 83){ 
     socket.emit('keyPress', {inputId: 'down', state: false}); 
    } 
    else if(event.keyCode === 65){ 
     socket.emit('keyPress', {inputId: 'left', state: false}); 
    } 
    else if(event.keyCode === 87){ 
     socket.emit('keyPress', {inputId: 'up', state: false}); 
    } 
}

我這個唯一的問題是，當用戶鍵入一個chatmessage到HTML的輸入，則charackter仍然會移動。

<input type="text" class="form-control" placeholder="Please enter message..." id="chat-input">

應該用哪種方式檢查html是否被選中/激活？

來源

2017-08-17 unicornquestion

也許你不應該在全球範圍內設置這麼多事件？ – Endless

你可以防止聊天消息輸入bubling keydown事件 –

'if（event.target.matches（cssSelector））{...}' – Endless

最簡單的方法可能是用document.activeElement測試活動元素。您可以使用document.activeElement.tagName並測試以確定它是否是輸入標籤。

因此，像

document.onkeydown = function(event){ 
    if (document.activeElement.tagName !== "input") { 
     if(event.keyCode === 68) { 
      //... 
     } 
    } 
}

這麼說，我建議使用addEventListener，而不是連接到onkeydown財產。 document.addEventListener('keydown', function() { /*...*/ });更好。這樣你就不會爲文檔覆蓋任何其他事件。這只是更好的練習。如果您需要支持IE8或更低版本，我只會使用document.onkeydown。

來源

2017-08-17 14:01:45 trlkly

謝謝，我已經改變了我的代碼。 – unicornquestion

JS - 如果未選擇輸入，只觸發document.onkeydown函數

回答

相關問題