Question

我正在调用document.onkeydown函数来使用W，A，S，D键触发移动功能。

使用以下代码正常工作：

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});
    }
}

我唯一的问题是，当用户在html输入中键入聊天消息时，charackter仍会移动。

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

应该使用哪种方式来检查html是否被选中/激活？

Answer 1

最简单的方法可能是使用[]测试活动元素。您可以使用document.activeElement并测试它是否为输入标记。

类似

document.activeElement.tagName

尽管如此，我建议使用document.onkeydown = function(event){ if (document.activeElement.tagName !== "input") { if(event.keyCode === 68) { //... } } }而不是附加到addEventListener属性。 onkeydown更好。这样您就不会覆盖文档的任何其他事件。这只是更好的做法。如果您需要支持IE8或更低版本，我只会使用document.addEventListener('keydown', function() { /*...*/ });。

JS - 仅在未选择输入时触发document.onkeydown函数

1 个答案: