在JavaScript中检测箭头按键
如何检测何时按下其中一个箭头键？ 我用这个来找出：
function checkKey(e) { var event = window.event ? window.event : e; console.log(event.keyCode) } 虽然它适用于所有其他键，但它并不适用于箭头键（也许是因为浏览器默认情况下会在这些键上滚动）。
箭头键只能由onkeydown触发，而不是onkeypress
键码是：
- 左= 37
- up = 38
- 对吧？
- 下= 40
在上下键调用function。 每个密钥都有不同的代码。
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 } }
可能是最简单的表述：
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; } };
演示（感谢用户安格斯格兰特）： http : //jsfiddle.net/angusgrant/E3tE6/
这应该跨浏览器工作。 如果浏览器出现问题，请留言。
还有其他的方法来获得关键的代码（e.which，e.charCode和window.event而不是e），但是它们不应该是必需的。 您可以在http://www.asquare.net/javascript/tests/KeyCode.html中尝试其中的大部分内容。; 请注意，event.keycode不适用于Firefox中的onkeypress，但它可以与onkeydown一起使用。
对于不可打印的键（如箭头键），请使用keydown keypress而不是keypress键：
function checkKey(e) { e = e || window.event; alert(e.keyCode); } document.onkeydown = checkKey;
我find的最好的JavaScript关键事件参考（例如，跳过quirksmode的裤子）在这里： http : //unixpapa.com/js/key.html
event.key ===“ArrowRight”…
最近更清洁：使用event.key 。 没有更多的任意数字代码！ 如果你正在翻译或知道你的用户都在现代浏览器，使用这个！
node.addEventListener('keydown', function(event) { const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown" });
Mozilla文档
支持的浏览器
PS event.code与箭头相同
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;
这是一个示例实现：
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. }
编辑：
我忘了，if语句需要被放入一个不断运行的循环中。
自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 } };
我已经能够用jQuery来捕获它们了：
$(document).keypress(function (eventObject) { alert(eventObject.keyCode); });
一个例子： http : //jsfiddle.net/AjKjU/
这是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>
我也在寻找这个答案，直到我遇到这个职位。
我发现了另一个解决scheme来知道不同的键的键码，礼貌我的问题。 我只是想分享我的解决scheme。
只需使用keyup / keydown事件在控制台写入值/使用event.keyCode相同的警报。 喜欢-
console.log(event.keyCode) // or alert(event.keyCode)
– rupam
这个更短
function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }
重新回答你需要keydown不keypress 。
假设你想在键被按下的同时不断移动某些东西，我发现keydown适用于除Opera之外的所有浏览器。 对于Opera而言， keydown只能在第一次按下时触发。 为了适应Opera使用：
document.onkeydown = checkKey; document.onkeypress = checkKey; function checkKey(e) { etc etc
这个图书馆岩石！ https://craig.is/killing/mice
Mousetrap.bind('up up down down left right left right ba enter', function() { highlight([21, 22, 23]); });
您需要快速按序列来突出显示该页面中的代码。
控制键码%=37和&=38 …，只有箭头键左= 37上= 38
function IsArrows (e) { return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); }
