在JavaScript中检测箭头键按下

当如何按下其中一个箭头键时如何检测?我用这个来找出:
function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}
虽然它适用于所有其他键,但它没有用于箭头键(可能因为默认情况下浏览器应该在这些键上滚动)。     
已邀请:
箭头键仅由
onkeydown
触发,而不是
onkeypress
密钥代码是: 左= 37 up = 38 对= 39 下来= 40     
上键上下通话功能。每个密钥都有不同的代码。
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;
    }
};
演示(感谢用户Angus Grant):http://jsfiddle.net/angusgrant/E3tE6/ 这应该跨浏览器工作。如果有浏览器不起作用,请发表评论。 还有其他方法可以获取密钥代码(例如,e.charCode和window.event而不是e),但它们不是必需的。您可以在http://www.asquare.net/javascript/tests/KeyCode.html上尝试大部分内容。 请注意,event.keycode在Firefox中不能与onkeypress一起使用,但它确实适用于onkeydown。     
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;
}
您可以轻松扩展它以检查
"w", "a", "s", "d"
或任何其他键 Mozilla文档 支持的浏览器 附:箭头
event.code
是相同的     
对于不可打印的键,如箭头键,请使用
keydown
而不是
keypress
function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;
我发现的最好的JavaScript关键事件参考(例如,击败quirksmode的裤子)在这里:http://unixpapa.com/js/key.html     
自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
    }
};
    
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.
}
    
我已经能够用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>
    
在我看到这篇文章之前,我也在寻找这个答案。 我找到了另一个解决方案来了解不同密钥的密钥代码,礼貌地解决了我的问题。我只是想分享我的解决方案。 只需使用keyup / keydown事件使用
event.keyCode
在控制台/警报中写入相同的值。喜欢-
console.log(event.keyCode) 

// or

alert(event.keyCode)
- 鲁帕姆     
那更短。
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 b a enter', function() {
    highlight([21, 22, 23]);
});
您需要快速按下序列以突出显示该页面中的代码。     
控制键码
%=37
&=38
...只剩下左箭头键= 37上升= 38
function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}
    
如果你想检测箭头按键但不需要特定的Javascript
function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}
    

要回复问题请先登录注册