Detecting arrow key presses in JavaScript

问题:

How do I detect when one of the arrow keys are pressed? I used this to find out:

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

Though it worked for every other key, it didn\'t for arrow keys (maybe because the browser is supposed to scroll on these keys by default).

回答1:

arrow keys are only triggered by onkeydown, not onkeypress

keycodes are:

• left = 37
• up = 38
• right = 39
• down = 40

回答2:

On key up and down call function. There are different codes for each key.

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
    }

}

回答3:

Possibly the tersest formulation:

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;
    }
};

Demo (thanks to user Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

This should work cross-browser. Leave a comment if there is a browser where it does not work.

There are other ways to get the key code (e.which, e.charCode, and window.event instead of e), but they should not be necessary. You can try most of them out at http://www.asquare.net/javascript/tests/KeyCode.html. Note that event.keycode does not work with onkeypress in Firefox, but it does work with onkeydown.

回答4:

event.key === \"ArrowRight\"...

More recent and much cleaner: use event.key. No more arbitrary number codes! If you are transpiling or know your users are all on modern browsers, use this!

node.addEventListener(\'keydown\', function(event) {
    const key = event.key; // \"ArrowRight\", \"ArrowLeft\", \"ArrowUp\", or \"ArrowDown\"
});

Verbose Handling:

switch (event.key) {
    case \"ArrowLeft\":
        // Left pressed
        break;
    case \"ArrowRight\":
        // Right pressed
        break;
    case \"ArrowUp\":
        // Up pressed
        break;
    case \"ArrowDown\":
        // Down pressed
        break;
}

You can easily extend this to check for \"w\", \"a\", \"s\", \"d\", or any other key

Mozilla Docs

Supported Browsers

P.S. event.code is the same for arrows

回答5:

Use keydown, not keypress for non-printable keys such as arrow keys:

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

The best JavaScript key event reference I\'ve found (beating the pants off quirksmode, for example) is here: http://unixpapa.com/js/key.html

回答6:

Modern answer since keyCode is now deprecated in favor of 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
    }
};

回答7:

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;

回答8:

Here\'s an example implementation:

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);
  }
});

回答9:

Here\'s how I did it:

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.
}

回答10:

I\'ve been able to trap them with jQuery:

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

An example: http://jsfiddle.net/AjKjU/

回答11:

That is the working code for chrome and 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>

回答12:

I was also looking for this answer until I came across this post.

I\'ve found another solution to know the keycode of the different keys, courtesy to my problem. I just wanted to share my solution.

Just use keyup/keydown event to write the value in the console/alert the same using event.keyCode. like-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- rupam

回答13:

That\'s shorter.

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

回答14:

Re answers that you need keydown not keypress.

Assuming you want to move something continuously while the key is pressed, I find that keydown works for all browsers except Opera. For Opera, keydown only triggers on 1st press. To accommodate Opera use:

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

回答15:

This library rocks! https://craig.is/killing/mice

Mousetrap.bind(\'up up down down left right left right b a enter\', function() {
    highlight([21, 22, 23]);
});

You need to press the sequence a bit fast to highlight the code in that page though.

回答16:

control the Key codes %=37 and &=38... and only arrow keys left=37 up=38

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