Javascript中的按键监听器答案

【问题标题】：Keylistener in JavascriptJavascript中的按键监听器
【发布时间】：2013-06-05 14:03:25
【问题描述】：

我正在为我正在使用 JavaScript 开发的游戏寻找 KeyListener。我不知道这在实际代码中是如何工作的，但它会是这样的：

if(keyPress == upKey)
{
    playerSpriteX += 10;
}
else if(keyPress == downKey)
{
    playerSpriteY -= 10;
}

等等……

我搜索了一下，Google 想出了一些我还不了解的涉及 AJAX 的东西。 JavaScript 中是否有内置函数可以执行此操作？

【问题讨论】：

标签： javascript keyboard key keylistener

【解决方案1】：

这是 2019 年现代浏览器的更新

let playerSpriteX = 0;

document.addEventListener('keyup', (e) => {
  if (e.code === "ArrowUp")        playerSpriteX += 10
  else if (e.code === "ArrowDown") playerSpriteX -= 10

  document.getElementById('test').innerHTML = 'playerSpriteX = ' + playerSpriteX;
});

Click on this window to focus it, and hit keys up and down
<br><br><br>
<div id="test">playerSpriteX = 0</div>

2013 年的原始答案

window.onkeyup = function(e) {
   var key = e.keyCode ? e.keyCode : e.which;

   if (key == 38) {
       playerSpriteX += 10;
   }else if (key == 40) {
       playerSpriteX -= 10;
   }
}

FIDDLE

【讨论】：

这正是我想要的！
keyCode 已弃用，请考虑使用code 而不是developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

【解决方案2】：

JSFIDDLE DEMO

如果您不希望事件连续（如果您希望用户每次都必须释放键），请将onkeydown 更改为onkeyup

window.onkeydown = function (e) {
    var code = e.keyCode ? e.keyCode : e.which;
    if (code === 38) { //up key
        alert('up');
    } else if (code === 40) { //down key
        alert('down');
    }
};

【讨论】：

【解决方案3】：

您检查了小型Mousetrap 库吗？

Mousetrap 是一个用于在 JavaScript 中处理键盘快捷键的简单库。

【讨论】：

【解决方案4】：

代码是

document.addEventListener('keydown', function(event){
    alert(event.keyCode);
} );

这将返回密钥的 ascii 代码。如果您需要密钥表示，请使用 event.key（这将返回 'a'、'o'、'Alt'...）

【讨论】：

这是keyCode，而不是keycode

【解决方案5】：

通过将event.key 转换为大写来进行更易读的比较（我使用了 onkeyup - 需要在每次按键时触发一次事件）：

window.onkeyup = function(event) {
    let key = event.key.toUpperCase();
    if ( key == 'W' ) {
        // 'W' key is pressed
    } else if ( key == 'D' ) {
        // 'D' key is pressed
    }
}

每个键都有自己的代码，通过输出“key”变量的值来获取它（例如，对于向上箭头键，它将是 'ARROWUP' -（转换为大写））

【讨论】：