Javascript 中的密钥侦听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17015019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keylistener in Javascript
提问by adeneo
I'm looking for a KeyListenerfor a game I'm developing in JavaScript. I have no idea how this would work in real code but it would be something like this:
我正在寻找一个KeyListener我正在用 JavaScript 开发的游戏。我不知道这在实际代码中是如何工作的，但它会是这样的：
if(keyPress == upKey)
{
playerSpriteX += 10;
}
else if(keyPress == downKey)
{
playerSpriteY -= 10;
}
etc...
等等...
I searched it up, and Google came up with things that involved AJAX which I don't understand yet. Is there a built in function in JavaScript that does this?
我搜索了一下，谷歌想出了一些我还不明白的涉及 AJAX 的东西。JavaScript 中是否有内置函数可以执行此操作？
回答by adeneo
Here's an update for modern browsers in 2019
这是 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>Original answer from 2013
2013 年的原始答案
window.onkeyup = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if (key == 38) {
playerSpriteX += 10;
}else if (key == 40) {
playerSpriteX -= 10;
}
}
回答by user7273226
The code is
代码是
document.addEventListener('keydown', function(event){
alert(event.keyCode);
} );
This return the ascii code of the key. If you need the key representation, use event.key (This will return 'a', 'o', 'Alt'...)
这将返回密钥的 ascii 代码。如果您需要键表示，请使用 event.key （这将返回 'a'、'o'、'Alt'...）
回答by Tom
If you don't want the event to be continuous (if you want the user to have to release the key each time), change onkeydownto onkeyup
如果您不希望事件连续发生（如果您希望用户每次都必须松开按键），请更改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');
}
};
回答by numediaweb
回答by ego
A bit more readable comparing is done by casting event.keyto upper case (I used onkeyup - needed the event to fire once upon each key tap):
通过转换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
}
}
Each key has it's own code, get it out by outputting value of "key" variable (eg for arrow up key it will be 'ARROWUP' - (casted to uppercase))
每个键都有自己的代码，通过输出“键”变量的值来获取它（例如，对于向上箭头键，它将是“ARROWUP”-（转换为大写））
