Javascript中的按键监听器

Posted 2023-02-25

【中文标题】Javascript中的按键监听器

【英文标题】：Keylistener in Javascript

【发布时间】：2013-06-05 14:03:25

【问题描述】：

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

if(keyPress == upKey)

    playerSpriteX += 10;

else if(keyPress == downKey)

    playerSpriteY -= 10;
 

等等……

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

【参考方案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' -（转换为大写））