检测JavaScript中的箭头键按下

如何检测何时按下箭头键之一？我用它来找出：

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

尽管它适用于所有其他键，但不适用于箭头键（可能是因为默认情况下浏览器应该在这些键上滚动）。

#1楼

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

我发现了另一个解决方案，可以根据我的问题来了解不同键的键码。我只是想分享我的解决方案。

只需使用keyup / keydown事件将值写入控制台/使用event.keyCode相同的方式进行提醒。喜欢-

console.log(event.keyCode) 

// or

alert(event.keyCode)

-卢比

#2楼

再次，你需要回答keydown没有keypress 。

假设您想在按下键的同时连续移动某些内容，我发现keydown适用于Opera以外的所有浏览器。对于Opera， keydown仅会触发第一次按下。为了适应Opera的使用：

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

#3楼

可能是最恰当的表述：

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。

#4楼

那是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>

#5楼

那更短。

function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3162724

标签

event

keycode

alert