检测JavaScript中的箭头键按下

时间 2020-02-04

原文原文链接

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

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

尽管它适用于全部其余键，但不适用于箭头键（多是由于默认状况下浏览器应该在这些键上滚动）。 html

#1楼

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

我发现了另外一个解决方案，能够根据个人问题来了解不一样键的键码。我只是想分享个人解决方案。 jquery

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

console.log(event.keyCode) 

// or

alert(event.keyCode)

-卢比 chrome

#2楼

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

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

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

#3楼

多是最恰当的表述： google

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/ spa

这应该跨浏览器工做。若是存在没法使用的浏览器，请发表评论。

还有其余获取键码的方法（例如，使用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); }