检测JavaScript中的方向键

我如何检测当一个方向键被按下?我用这个找到了答案:

function checkKey(e) {
var event = window.event ? window.event : e;
console.log(event.keyCode)
}

虽然它适用于所有其他键，但它不适用于方向键(可能是因为浏览器默认情况下应该在这些键上滚动)。

686327 次浏览
小开
最佳答案

方向键只能由onkeydown触发，而不是onkeypress。

键码是:

  • 左= 37
  • Up = 38
  • 右= 39
  • 下降= 40
小开

我已经能够用jQuery捕获它们:

$(document).keypress(function (eventObject) {
alert(eventObject.keyCode);
});

示例:http://jsfiddle.net/AjKjU/

小开

对于不可打印的键，如方向键，使用keydown，而不是keypress:

function checkKey(e) {
e = e || window.event;
alert(e.keyCode);
}


document.onkeydown = checkKey;

我找到的最好的JavaScript键事件参考(例如，打败quirksmode)在这里:http://unixpapa.com/js/key.html

小开 
function checkArrowKeys(e){
var arrs= ['left', 'up', 'right', 'down'],
key= window.event? event.keyCode: e.keyCode;
if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;
小开

上下键调用函数。每个钥匙都有不同的密码。

document.onkeydown = checkKey;


function checkKey(e) {


e = e || window.event;


if (e.keyCode == '38') {
// up arrow
}
else if (e.keyCode == '40') {
// down arrow
}
else if (e.keyCode == '37') {
// left arrow
}
else if (e.keyCode == '39') {
// right arrow
}


}
小开

我也一直在寻找这个答案，直到我看到这篇文章。

我已经找到了另一个解决方案，知道不同的钥匙的键码，礼貌的我的问题。我只是想分享我的解决方案。

只需使用keyup/keydown事件在控制台/警报中写入值，使用event.keyCode。像- - - - - -

console.log(event.keyCode)


// or


alert(event.keyCode)

——rupam

小开

回复你需要keydown而不是keypress。

假设您想在按下键时连续移动某个东西，我发现keydown适用于除Opera之外的所有浏览器。对于Opera， keydown只在第一次按下时触发。为了适应Opera的使用:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc
小开

可能是最简洁的表述:

document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
alert('left');
break;
case 38:
alert('up');
break;
case 39:
alert('right');
break;
case 40:
alert('down');
break;
}
};

演示(感谢用户Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

这应该可以跨浏览器工作。如果有浏览器无法使用，请留下评论。

还有其他方法来获取键代码(e.t it, e.c arcode, and window.)事件而不是e)，但它们不应该是必要的。你可以在http://www.asquare.net/javascript/tests/KeyCode.html上尝试其中的大部分。 注意这个事件。在Firefox中，keycode不能与onkeypress一起工作，但它可以与onkeydown一起工作

小开

这是chrome和firefox的工作代码

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>


<script type="text/javascript">


function leftArrowPressed() {
alert("leftArrowPressed" );
window.location = prevUrl
}


function rightArrowPressed() {
alert("rightArrowPressed" );
window.location = nextUrl
}
function topArrowPressed() {
alert("topArrowPressed" );
window.location = prevUrl
}


function downArrowPressed() {
alert("downArrowPressed" );
window.location = nextUrl
}


document.onkeydown = function(evt) {
var nextPage = $("#next_page_link")
var prevPage = $("#previous_page_link")
nextUrl = nextPage.attr("href")
prevUrl = prevPage.attr("href")
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftArrowPressed(nextUrl);
break;


case 38:
topArrowPressed(nextUrl);
break;


case 39:
rightArrowPressed(prevUrl);
break;


case 40:
downArrowPressed(prevUrl);
break;


}
};




</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a>
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
</p>
</body>
</html>
小开

这是短的。

函数IsArrows (e) { return (e.keyCode >= 37 &&e.keyCode <= 40); 代码}< / > < / p >

小开

下面是一个示例实现:

var targetElement = $0 || document.body;


function getArrowKeyDirection (keyCode) {
return {
37: 'left',
39: 'right',
38: 'up',
40: 'down'
}[keyCode];
}


function isArrowKey (keyCode) {
return !!getArrowKeyDirection(keyCode);
}


targetElement.addEventListener('keydown', function (event) {
var direction,
keyCode = event.keyCode;


if (isArrowKey(keyCode)) {
direction = getArrowKeyDirection(keyCode);


console.log(direction);
}
});
小开

我是这样做的:

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
delete keystate[e.keyCode];
});


if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}
小开

控制键码%=37和&=38…只有箭头键左=37向上=38

function IsArrows (e) {
return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40));
}
小开

事件。key === " arrow wright "…

使用event.key。不再有任意的数字代码!如果您正在编译或知道您的用户都使用现代浏览器，请使用这个!

node.addEventListener('keydown', function(event) {
const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

详细的处理:

switch (event.key) {
case "ArrowLeft":
// Left pressed
break;
case "ArrowRight":
// Right pressed
break;
case "ArrowUp":
// Up pressed
break;
case "ArrowDown":
// Down pressed
break;
}

现代开关处理:

const callback = {
"ArrowLeft"  : leftHandler,
"ArrowRight" : rightHandler,
"ArrowUp"    : upHandler,
"ArrowDown"  : downHandler,
}[event.key]
callback?.()

注意:旧属性(.keyCode和.which)已弃用。

"w", "a", "s", "d"表示方向，使用event.code

为了支持使用非qwerty/英文键盘布局的用户，您应该使用event.code。这将保留物理键的位置，即使导致字符发生变化。

event.key在Dvorak上是，，在Azerty上是z，这样你的游戏就不能玩了。

const {code} = event
if (code === "KeyW") // KeyA, KeyS, KeyD

最理想的情况是，你还允许按键重新映射，无论玩家处于何种情况，这都对他们有利。

注:event.code和< >强劲的箭< / >强是一样的

key Mozilla Docs

code Mozilla Docs

支持的浏览器

小开

这个图书馆真棒! # EYZ0 < / p > 

Mousetrap.bind('up up down down left right left right b a enter', function() {
highlight([21, 22, 23]);
});

不过，您需要快速按下序列以突出显示该页中的代码。

小开

从keyCode现在已弃用到key的现代答案:

document.onkeydown = function (e) {
switch (e.key) {
case 'ArrowUp':
// up arrow
break;
case 'ArrowDown':
// down arrow
break;
case 'ArrowLeft':
// left arrow
break;
case 'ArrowRight':
// right arrow
}
};
小开

如果你想检测箭头按键，但不需要特定的Javascript

function checkKey(e) {
if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
// do something
};
}
小开

我认为最新的方法是:

document.addEventListener("keydown", function(event) {
event.preventDefault();
const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
switch (key) { // change to event.key to key to use the above variable
case "ArrowLeft":
// Left pressed
<do something>
break;
case "ArrowRight":
// Right pressed
<do something>
break;
case "ArrowUp":
// Up pressed
<do something>
break;
case "ArrowDown":
// Down pressed
<do something>
break;
}
});

这假设开发人员希望代码在页面的任何地方都是活动的，而客户端应该忽略任何其他按键。消除event.preventDefault();行if键按，包括被此处理程序捕获的键按，应该仍然是活动的。

小开

如果你使用jquery，你也可以这样做，

 $(document).on("keydown", '.class_name', function (event) {
if (event.keyCode == 37) {
console.log('left arrow pressed');
}
if (event.keyCode == 38) {
console.log('up arrow pressed');
}
if (event.keyCode == 39) {
console.log('right arrow pressed');
}
if (event.keyCode == 40) {
console.log('down arrow pressed');
}
});
小开

方向键在按键弹起上触发

$(document).on("keyup", "body", function(e) {
if (e.keyCode == 38) {
// up arrow
console.log("up arrow")
}
if (e.keyCode == 40) {
// down arrow
console.log("down arrow")
}
if (e.keyCode == 37) {
// left arrow
console.log("lefy arrow")
}
if (e.keyCode == 39) {
// right arrow
console.log("right arrow")
}
})

Onkeydown允许ctrl, alt，屎

Onkeyup允许标签，向上箭头，向下箭头，向左箭头，向下箭头

小开

使用关键和ES6。

这为你提供了一个单独的功能，每个方向键，而不使用开关，也适用于2,4,6,8键在numpad时，NumLock是打开的。

const element = document.querySelector("textarea"),
ArrowRight = k => {
console.log(k);
},
ArrowLeft = k => {
console.log(k);
},
ArrowUp = k => {
console.log(k);
},
ArrowDown = k => {
console.log(k);
},
handler = {
ArrowRight,
ArrowLeft,
ArrowUp,
ArrowDown
};


element.addEventListener("keydown", e => {
const k = e.key;


if (handler.hasOwnProperty(k)) {
handler[k](k);
}
});
<p>Click the textarea then try the arrows</p>
<textarea></textarea>


提交答案