606

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

22 Answers 22

928

Arrow keys are only triggered by onkeydown, not onkeypress.

The keycodes are:

  • left = 37
  • up = 38
  • right = 39
  • down = 40
11
  • 26
    Some browsers do trigger keypress events for arrow keys, but you're right that keydown always works for arrow keys.
    – Tim Down
    Apr 8, 2011 at 15:37
  • 4
    If you press %, you also get keyCode 37
    – xorcus
    Oct 17, 2013 at 14:22
  • 12
    @xorcus -- No, you get 53 with a keydown event. You get 37 with keypress, which is a different thing
    – user578895
    Oct 19, 2013 at 6:00
  • 1
    @1nfiniti onkeyup won't consider the repeated call of the keydown event when you hold the arrow down.
    – pmrotule
    Sep 16, 2015 at 16:52
  • 4
    @MrCroft - or also listen to onkeyup and stop the event there. Realistically you shouldn't be modifying UI behavior with Javascript, however.
    – user578895
    Jan 5, 2017 at 19:52
293

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
    }

}
13
  • 4
    What does the second line do?
    – eshellborn
    Aug 14, 2013 at 20:39
  • 22
    To clarify, 'e || window.event' means that if 'e' is a defined value, it will be the result of the '||' expression. If 'e' is not defined, 'window.event' will be the result of the '||' expression. So it's basically shorthand for: e = e ? e : window.event; Or: if (typeof(e) === "undefined") { e = window.event; } Dec 17, 2013 at 20:35
  • 28
    It's to make it work on old versions of IE (pre IE9) where the event was not passed into the handler function. Jan 24, 2014 at 9:10
  • 17
    Just to note keyCode is a number and === should ideally be used
    – alexrogers
    Apr 21, 2015 at 10:00
  • 14
    @ketan the point was that keyCode is a number and should be checked like keyCode === 32, not keyCode == '32' or keyCode === '32'. Apr 28, 2015 at 7:43
275

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

Modern Switch Handling:

const callback = {
    "ArrowLeft"  : leftHandler,
    "ArrowRight" : rightHandler,
    "ArrowUp"    : upHandler,
    "ArrowDown"  : downHandler,
}[event.key]
callback?.()

NOTE: The old properties (.keyCode and .which) are Deprecated.

"w", "a", "s", "d" for direction, use event.code

To support users who are using non-qwerty/English keyboard layouts, you should instead use event.code. This will preserve physical key location, even if resulting character changes.

event.key would be , on Dvorak and z on Azerty, making your game unplayable.

const {code} = event
if (code === "KeyW") // KeyA, KeyS, KeyD

Optimally, you also allow key remapping, which benefits the player regardless of their situation.

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

key Mozilla Docs

code Mozilla Docs

Supported Browsers

5
  • 13
    Thank you for using key and not keyCode, that was deprecated.
    – v010dya
    Jul 6, 2017 at 18:57
  • 12
    Note from MDN: Internet Explorer, Edge (16 and earlier), and Firefox (36 and earlier) use "Left", "Right", "Up", and "Down" instead of "ArrowLeft", "ArrowRight", "ArrowUp", and "ArrowDown".
    – Simon
    Aug 28, 2018 at 8:47
  • 1
    as event.keyCode is deprecated this should be the accepted answer Jan 27, 2021 at 19:20
  • I just loved the modern switch handling Apr 19, 2022 at 13:48
  • I presume that event.key === "ArrowRight" is not doing a string comparison to check a single keypress. Can anyone confirm?
    – jdhildeb
    Oct 4, 2022 at 19:30
102

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.

1
  • 5
    I had to look up the definition of terse, then I (sprightfully) postulated that tersest was an improper conjugation; alas, I concede: my solicitude was refutable.
    – ashleedawg
    Jan 2, 2020 at 11:30
22

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

1
  • Now keypress has been marked as deprecated
    – d.k
    Apr 22, 2021 at 22:18
20

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

I believe the most recent method would be:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

This assumes the developer wants the code to be active anywhere on the page and the client should ignore any other key presses. Eliminate the event.preventDefault(); line if keypresses, including those caught by this handler should still be active.

9
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;
1
  • 2
    Doesn't it worth to put arrs outside of the function? No need to recreate it every call
    – Grief
    Mar 3, 2016 at 16:14
9

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);
  }
});
1
  • I am getting $0 is not defined var targetElement = typeof $0 !== 'undefined' ? $0 : document.body; or just: var targetElement = document.body; is ok
    – papo
    Dec 13, 2016 at 20:37
8

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

Arrow Keys are triggered on keyup

$(document).on("keyup", "body", function(e) {
 if (e.keyCode == 38) {
    // up arrow
    console.log("up arrow")
  }
  if (e.keyCode == 40) {
      // down arrow
      console.log("down arrow")
  }
  if (e.keyCode == 37) {
    // left arrow
    console.log("lefy arrow")
  }
  if (e.keyCode == 39) {
    // right arrow
    console.log("right arrow")
  }
})

onkeydown allows ctrl, alt, shits

onkeyup allows tab, up arrows, down arrows, left arrows, down arrows

4

I've been able to trap them with jQuery:

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

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

1
  • 5
    keypress won't work with arrow keys. You have to use $(document).on('keydown', function() {...}) instead
    – Juribiyan
    Jan 15, 2016 at 3:51
4

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>
3

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

3

That's shorter.

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

1
  • 2
    short is good: if ([37,38,39,40].indexOf(e.keyCode)!=-1){ console.log('arrow pressed') }
    – animaacija
    Jul 12, 2015 at 13:46
3

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.

0
3

With key and ES6.

This gives you a separate function for each arrow key without using switch and also works with the 2,4,6,8 keys in the numpad when NumLock is on.

const element = document.querySelector("textarea"),
  ArrowRight = k => {
    console.log(k);
  },
  ArrowLeft = k => {
    console.log(k);
  },
  ArrowUp = k => {
    console.log(k);
  },
  ArrowDown = k => {
    console.log(k);
  },
  handler = {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  };

element.addEventListener("keydown", e => {
  const k = e.key;

  if (handler.hasOwnProperty(k)) {
    handler[k](k);
  }
});
<p>Click the textarea then try the arrows</p>
<textarea></textarea>

2

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
1

If you use jquery then you can also do like this,

 $(document).on("keydown", '.class_name', function (event) {
    if (event.keyCode == 37) {
        console.log('left arrow pressed');
    }
    if (event.keyCode == 38) {
        console.log('up arrow pressed');
    }
    if (event.keyCode == 39) {
        console.log('right arrow pressed');
    }
    if (event.keyCode == 40) {
        console.log('down arrow pressed');
    }
 });
0

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

If you want to detect arrow keypresses but not need specific in Javascript

function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}
0

In the off chance you're still developing with desktops in mind in 2023:

KeyboardEvent: keyCode property has been deprecated

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Use the ket property https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

// run snippet and click a key to see which key you clicked:

document.addEventListener('keydown', (event) => { 
 alert(`You clicked ${event.key}`);
});

Not the answer you're looking for? Browse other questions tagged or ask your own question.