檢測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>