检测 JavaScript 中的箭头键按下
Posted
技术标签:
【中文标题】检测 JavaScript 中的箭头键按下【英文标题】：Detecting arrow key presses in JavaScript 【发布时间】：2011-08-01 14:36:54 【问题描述】：如何检测何时按下箭头键之一？我用这个来发现：
function checkKey(e)
var event = window.event ? window.event : e;
console.log(event.keyCode)
虽然它适用于其他所有键，但它不适用于箭头键（可能是因为默认情况下浏览器应该在这些键上滚动）。
【问题讨论】：
【参考方案1】：方向键只能由onkeydown触发，onkeypress不会触发。
键码是：
左 = 37 向上 = 38 右 = 39 向下 = 40【讨论】：
有些浏览器确实会触发箭头键的keypress 事件，但你说得对，keydown 总是适用于箭头键。
如果你按%，你也会得到keyCode 37
@xorcus -- 不，您会收到带有keydown 事件的53。你得到37 和keypress，这是另一回事
@zyklus 我昨晚读错了。我以为它说的是“或”。对不起，我删除了我的评论。
@MrCroft - 或者也收听onkeyup 并在那里停止活动。但是，实际上您不应该使用 javascript 修改 UI 行为。【参考方案2】：
我已经能够用 jQuery 捕获它们：
$(document).keypress(function (eventObject)
alert(eventObject.keyCode);
);
一个例子：http://jsfiddle.net/AjKjU/
【讨论】：
keypress 不能使用箭头键。你必须改用$(document).on('keydown', function() ...)【参考方案3】：
使用keydown，而不是keypress 用于不可打印的键，例如箭头键：
function checkKey(e)
e = e || window.event;
alert(e.keyCode);
document.onkeydown = checkKey;
我找到的最好的 JavaScript 键事件参考（例如，从 quirksmode 中脱颖而出）在这里：http://unixpapa.com/js/key.html
【讨论】：
现在keypress 已被标记为已弃用【参考方案4】：
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;
【讨论】：
将arrs 放在函数之外不值得吗？无需每次调用都重新创建它【参考方案5】：
开键上下调用功能。每个键都有不同的代码。
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
【讨论】：
第二行是做什么的？ 澄清一下，'e || window.event' 表示如果 'e' 是一个定义的值，它将是 '||' 的结果表达。如果未定义“e”，则“window.event”将是“||”的结果表达。所以它基本上是：e = e ? e : window.event; 或：if (typeof(e) === "undefined") e = window.event;
这是为了让它在旧版本的 IE（IE9 之前）上工作，其中事件没有传递到处理函数中。
请注意 keyCode 是一个数字，最好使用 ===
@ketan 关键是 keyCode 是一个数字，应该像 keyCode === 32 一样检查，而不是 keyCode == '32' 或 keyCode === '32'。【参考方案6】：
在看到这篇文章之前，我也在寻找这个答案。
我找到了另一种解决方案来了解不同键的键码，感谢我的问题。我只是想分享我的解决方案。
只需使用 keyup/keydown 事件在控制台/警报中写入值，同样使用event.keyCode。喜欢-
console.log(event.keyCode)
// or
alert(event.keyCode)
- 鲁班
【讨论】：
【参考方案7】：重新回答您需要keydown 而不是keypress。
假设您想在按下键时连续移动某些东西，我发现keydown 适用于除 Opera 之外的所有浏览器。对于 Opera，keydown 仅在第一次按下时触发。为了适应 Opera 使用：
document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
etc etc
【讨论】：
【参考方案8】：可能是最简洁的表述：
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.which、e.charCode 和 window.event 代替 e），但它们不是必需的。您可以在http://www.asquare.net/javascript/tests/KeyCode.html 试用其中的大部分。 请注意，在 Firefox 中 event.keycode 不能与 onkeypress 一起使用，但它可以与 onkeydown 一起使用。
【讨论】：
我不得不查找terse 的定义，然后我（爽快地）假设 tersest 是不恰当的变位；唉，我承认：我的关心是refutable。【参考方案9】：这是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>
【讨论】：
【参考方案10】：那就更短了。
function IsArrows (e)
return (e.keyCode >= 37 && e.keyCode <= 40);
【讨论】：
短是好的：if ([37,38,39,40].indexOf(e.keyCode)!=-1) console.log('arrow pressed') 【参考方案11】：
这是一个示例实现：
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);
);
【讨论】：
我得到 $0 未定义var targetElement = typeof $0 !== 'undefined' ? $0 : document.body; 或只是：var targetElement = document.body; 没问题【参考方案12】：
我是这样做的：
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.
【讨论】：
【参考方案13】：控制键码 %=37 和 &=38... 并且只有箭头键 left=37 up=38
function IsArrows (e)
return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40));
【讨论】：
【参考方案14】：event.key === "ArrowRight"...
更新更简洁：使用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
Supported Browsers
【讨论】：
感谢您使用key 而不是 keyCode，它已被弃用。
来自 MDN 的注释：Internet Explorer、Edge（16 及更早版本）和 Firefox（36 及更早版本）使用“Left”、“Right”、“Up”和“Down”而不是“ArrowLeft” "、"ArrowRight"、"ArrowUp" 和 "ArrowDown"。
因为 event.keyCode 已被弃用，这应该是公认的答案【参考方案15】：
这个图书馆太棒了！ https://craig.is/killing/mice
Mousetrap.bind('up up down down left right left right b a enter', function()
highlight([21, 22, 23]);
);
不过，您需要快速按下序列以突出显示该页面中的代码。
【讨论】：
【参考方案16】：现代答案，因为 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
;
【讨论】：
【参考方案17】：如果您想检测箭头按键但不需要在 Javascript 中指定
function checkKey(e)
if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39)
// do something
;
【讨论】：
【参考方案18】：我相信最新的方法是：
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();如果按键（包括由此处理程序捕获的按键）仍应处于活动状态，则行。
【讨论】：
【参考方案19】：如果你使用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');
);
【讨论】：
【参考方案20】：keyup
触发箭头键$(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、shits
onkeyup 允许制表符、向上箭头、向下箭头、向左箭头、向下箭头
【讨论】：
【参考方案21】：使用 key 和 ES6。
这为每个箭头键提供了一个单独的功能，而无需使用开关，并且还可以在NumLock 开启时与数字键盘中的 2、4、6、8 键一起使用。
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>【讨论】：
以上是关于检测 JavaScript 中的箭头键按下的主要内容，如果未能解决你的问题，请参考以下文章