Detecting arrow key presses in JavaScript

Question

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

User · Answer

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.

User · Answer

event key      quot ArrowRight quot     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      quot ArrowRight quot    quot ArrowLeft quot    quot ArrowUp quot   or  quot ArrowDown quot       Verbose Handling  switch  event key        case  quot ArrowLeft quot              Left pressed         break      case  quot ArrowRight quot              Right pressed         break      case  quot ArrowUp quot              Up pressed         break      case  quot ArrowDown quot              Down pressed         break     Modern Switch Handling  const callback          quot ArrowLeft quot     leftHandler       quot ArrowRight quot    rightHandler       quot ArrowUp quot       upHandler       quot ArrowDown quot     downHandler    event key  callback       NOTE  The old properties   keyCode and  which  are Deprecated    quot w quot    quot a quot    quot s quot    quot d quot  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      quot KeyW quot      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

User · Answer

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

User · Answer

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

User · Answer

That is the working code for chrome and firefox    lt html gt   lt head gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  gt  lt  script gt    lt script type  text javascript  gt       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                       lt  script gt   lt  head gt   lt body gt   lt p gt   lt a id  previous page link  href  http   www latest-tutorial com  gt Latest Tutorials lt  a gt    lt a id  next page link  href  http   www zeeshanakhter com  gt Zeeshan Akhter lt  a gt    lt  p gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D  const element   document querySelector  textarea    x000D    ArrowRight   k   gt    x000D      console log k   x000D       x000D    ArrowLeft   k   gt    x000D      console log k   x000D       x000D    ArrowUp   k   gt    x000D      console log k   x000D       x000D    ArrowDown   k   gt    x000D      console log k   x000D       x000D    handler     x000D      ArrowRight  x000D      ArrowLeft  x000D      ArrowUp  x000D      ArrowDown x000D       x000D   x000D  element addEventListener  keydown   e   gt    x000D    const k   e key  x000D   x000D    if  handler hasOwnProperty k     x000D      handler k  k   x000D      x000D      x000D   lt p gt Click the textarea then try the arrows lt  p gt  x000D   lt textarea gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

control the Key codes   37 and  amp  38    and only arrow keys left 37  up 38  function IsArrows  e       return    evt shiftKey  amp  amp   e keyCode  gt   37  amp  amp  e keyCode  lt   40

User · Answer

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

User · Answer

Arrow keys are only triggered by onkeydown  not onkeypress   The keycodes are    left   37 up    38 right   39 down   40

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

That s shorter   function IsArrows  e       return  e keyCode  gt   37  amp  amp  e keyCode  lt   40

User · Answer

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

User · Answer

function checkArrowKeys e       var arrs    left    up    right    down         key  window event  event keyCode  e keyCode      if key  amp  amp  key gt 36  amp  amp  key lt 41  alert arrs key-37      document onkeydown  checkArrowKeys

User · Answer

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

User · Answer

I ve been able to trap them with jQuery     document  keypress function  eventObject        alert eventObject keyCode         An example  http   jsfiddle net AjKjU

[javascript] Detecting arrow key presses in JavaScript

Examples related to javascript

Examples related to keypress

Examples related to keyboard-events