How to detect if multiple keys are pressed at once using JavaScript

Question

I m trying to develop a JavaScript game engine and I ve came across this problem    When I press SPACE the character jumps  When I press  rightarrow  the character moves right    The problem is that when I m pressing right and then press space  the character jumps and then stops moving   I use the keydown function to get the key pressed  How can I check if there are multiple keys pressed at once

User · Answer

This is not a universal method  but it s usefull in some cases  It s usefull for combinations like CTRL   something or Shift   something or CTRL   Shift   something  etc  Example  When you want to print a page using CTRL   P  first key pressed is always CTRL followed by P  Same with CTRL   S  CTRL   U and other combinations   x000D   x000D  document addEventListener  keydown  function e                SHIFT   something     if e shiftKey           switch e code                case  KeyS                   console log  Shift   S                    break                          CTRL   SHIFT   something     if e ctrlKey  amp  amp  e shiftKey           switch e code                case  KeyS                   console log  CTRL   Shift   S                    break                        x000D   x000D   x000D

User · Answer

document onkeydown   keydown    function keydown  evt          if   evt  evt   event        if  evt ctrlKey  amp  amp  evt altKey  amp  amp  evt keyCode     115             alert  CTRL ALT F4            else if  evt shiftKey  amp  amp  evt keyCode     9              alert  Shift TAB

User · Answer

Easiest  and most Effective Method       check key press     function loop               gt  gt key lt  lt  can be any string representing a letter eg   a    b    ctrl           if map  key    true              do something                     multiple keys         if map  x    true amp  amp map  ctrl    true            console log  x  and ctrl are being held down together                          gt  gt  gt variable which will hold all key information lt  lt      var map       Key Event Listeners     window addEventListener  keydown   btnd  true       window addEventListener  keyup   btnu  true          Handle button down       function btnd e          map e key    true                 Handle Button up       function btnu e          map e key    false                 gt  gt  gt If you want to see the state of every Key on the Keybaord lt  lt  lt      setInterval      gt                    for  var x in map                        log          x         map x                                     console log log                   log                      300

User · Answer

document  ready function                 using ascii 17 for ctrl  18 for alt and 83 for  S             ctr alt S         var map     17  false  18  false  83  false              document  keyup function  e                if  e keyCode in map                    map e keyCode    true                  if  map 17   amp  amp  map 18   amp  amp  map 83                            Write your own code here  what  you want to do                     map 17    false                      map 18    false                      map 83    false                                              else                      if u press any other key apart from that  map  will reset                  map 17    false                  map 18    false                  map 83    false

User · Answer

Make the keydown even call multiple functions  with each function checking for a specific key and responding appropriately   document keydown   function  key         checkKey  x        checkKey  y

User · Answer

You should use the keydown event to keep track of the keys pressed  and you should use the keyup event to keep track of when the keys are released   See this example  http   jsfiddle net vor0nwe mkHsU    Update  I   m reproducing the code here  in case jsfiddle net bails   The HTML    lt ul id  log  gt       lt li gt List of keys  lt  li gt   lt  ul gt       and the Javascript  using jQuery    var log       log   0       pressedKeys          document body  keydown function  evt        var li   pressedKeys evt keyCode       if   li            li   log appendChild document createElement  li             pressedKeys evt keyCode    li              li  text  Down      evt keyCode         li  removeClass  key-up           document body  keyup function  evt        var li   pressedKeys evt keyCode       if   li           li   log appendChild document createElement  li                 li  text  Up      evt keyCode         li  addClass  key-up          In that example  I   m using an array to keep track of which keys are being pressed   In a real application  you might want to delete each element once their associated key has been released     Note that while I ve used jQuery to make things easy for myself in this example  the concept works just as well when working in  raw  Javascript

User · Answer

I used this way  had to check wherever is Shift   Ctrl pressed       create some object to save all pressed keys var keys         shift  false      ctrl  false       document body  keydown function event       save status of the button  pressed      true      if  event keyCode    16            keys  shift     true        else if  event keyCode    17            keys  ctrl     true            if  keys  shift    amp  amp  keys  ctrl                  convert   trigger  click       or do anything else              document body  keyup function event           reset status of the button  released      false      if  event keyCode    16            keys  shift     false        else if  event keyCode    17            keys  ctrl     false

User · Answer

Note  keyCode is now deprecated  Multiple keystroke detection is easy if you understand the concept The way I do it is like this  var map          You could also use an array onkeydown   onkeyup   function e       e   e    event     to deal with IE     map e keyCode    e type     keydown          insert conditional here       This code is very simple  Since the computer only passes one keystroke at a time  an array is created to keep track of multiple keys  The array can then be used to check for one or more keys at once  Just to explain  let s say you press A and B  each fires a keydown event that sets map e keyCode  to the value of e type    keydown  which evaluates to either true or false  Now both map 65  and map 66  are set to true  When you let go of A  the keyup event fires  causing the same logic to determine the opposite result for map 65   A   which is now false  but since map 66   B  is still  quot down quot   it hasn t triggered a keyup event   it remains true  The map array  through both events  looks like this     keydown A     keydown B       65 true      66 true      keyup A    keydown B       65 false      66 true    There are two things you can do now  A  A Key logger  example  can be created as a reference for later when you want to quickly figure out one or more key codes  Assuming you have defined an html element and pointed to it with the variable element  element innerHTML       var i  l   map length  for i   0  i  lt  l  i          if map i            element innerHTML      lt hr gt     i           Note  You can easily grab an element by its id attribute   lt div id  quot element quot  gt  lt  div gt   This creates an html element that can be easily referenced in javascript with element alert element       Object HTMLDivElement   You don t even have to use document getElementById   or     to grab it  But for the sake of compatibility  use of jQuery s     is more widely recommended  Just make sure the script tag comes after the body of the HTML  Optimization tip  Most big-name websites put the script tag after the body tag for optimization  This is because the script tag blocks further elements from loading until its script is finished downloading  Putting it ahead of the content allows the content to load beforehand  B  which is where your interest lies  You can check for one or more keys at a time where   insert conditional here   was  take this example  if map 17   amp  amp  map 16   amp  amp  map 65       CTRL SHIFT A     alert  Control Shift A     else if map 17   amp  amp  map 16   amp  amp  map 66       CTRL SHIFT B     alert  Control Shift B     else if map 17   amp  amp  map 16   amp  amp  map 67       CTRL SHIFT C     alert  Control Shift C        Edit  That isn t the most readable snippet  Readability s important  so you could try something like this to make it easier on the eyes  function test key selkey       var alias              quot ctrl quot    17           quot shift quot   16           quot A quot       65                                return key selkey     key alias selkey       function test keys        var keylist   arguments       for var i   0  i  lt  keylist length  i            if  test key keylist i                return false       return true     Usage  test keys 13  16  65  test keys  ctrl    shift    A   test key 65  test key  A    Is this better  if test keys  ctrl    shift         if test key  A             alert  Control Shift A          else if test key  B             alert  Control Shift B          else if test key  C             alert  Control Shift C              end of edit   This example checks for CtrlShiftA  CtrlShiftB  and CtrlShiftC It s just as simple as that    Notes Keeping Track of KeyCodes As a general rule  it is good practice to document code  especially things like Key codes  like     CTRL ENTER  so you can remember what they were  You should also put the key codes in the same order as the documentation  CTRL ENTER   gt  map 17   amp  amp  map 13   NOT map 13   amp  amp  map 17    This way you won t ever get confused when you need to go back and edit the code  A gotcha with if-else chains If checking for combos of differing amounts  like CtrlShiftAltEnter and CtrlEnter   put smaller combos after larger combos  or else the smaller combos will override the larger combos if they are similar enough  Example     Correct  if map 17   amp  amp  map 16   amp  amp  map 13       CTRL SHIFT ENTER     alert  Whoa  mr  power user     else if map 17   amp  amp  map 13       CTRL ENTER     alert  You found me     else if map 13       ENTER     alert  You pressed Enter  You win the prize          Incorrect  if map 17   amp  amp  map 13       CTRL ENTER     alert  You found me     else if map 17   amp  amp  map 16   amp  amp  map 13       CTRL SHIFT ENTER     alert  Whoa  mr  power user     else if map 13       ENTER     alert  You pressed Enter  You win the prize          What will go wrong  When trying to do CTRL SHIFT ENTER  it will    detect CTRL ENTER first  and override CTRL SHIFT ENTER     Removing the else s is not a proper solution  either    as it will cause it to alert BOTH  quot Mr  Power user quot  AND  quot You Found Me quot   Gotcha   quot This key combo keeps activating even though I m not pressing the keys quot  When dealing with alerts or anything that takes focus from the main window  you might want to include map      to reset the array after the condition is done  This is because some things  like alert    take the focus away from the main window and cause the  keyup  event to not trigger  For example  if map 17   amp  amp  map 13       CTRL ENTER     alert  Oh noes  a bug          When you Press any key after executing this  it will alert again  even though you     are clearly NOT pressing CTRL ENTER    The fix would look like this   if map 17   amp  amp  map 13       CTRL ENTER     alert  Take that  bug         map            The bug no longer happens since the array is cleared  Gotcha  Browser Defaults Here s an annoying thing I found  with the solution included  Problem  Since the browser usually has default actions on key combos  like CtrlD activates the bookmark window  or CtrlShiftC activates skynote on maxthon   you might also want to add return false after map       so users of your site won t get frustrated when the  quot Duplicate File quot  function  being put on CtrlD  bookmarks the page instead  if map 17   amp  amp  map 68       CTRL D     alert  The bookmark window didn  t pop up         map           return false     Without return false  the Bookmark window would pop up  to the dismay of the user  The return statement  new  Okay  so you don t always want to exit the function at that point  That s why the event preventDefault   function is there  What it does is set an internal flag that tells the interpreter to not allow the browser to run its default action  After that  execution of the function continues  whereas return will immediately exit the function   Understand this distinction before you decide whether to use return false or e preventDefault   event keyCode is deprecated User SeanVieira pointed out in the comments that event keyCode is deprecated  There  he gave an excellent alternative  event key  which returns a string representation of the key being pressed  like  quot a quot  for A  or  quot Shift quot  for Shift  I went ahead and cooked up a tool for examining said strings  element onevent vs element addEventListener Handlers registered with addEventListener can be stacked  and are called in the order of registration  while setting  onevent directly is rather aggressive and overrides anything you previously had  document body onkeydown   function ev          do some stuff     ev preventDefault       cancels default actions     return false     cancels this function as well as default actions    document body addEventListener  quot keydown quot   function ev          do some stuff     ev preventDefault      cancels default actions     return false     cancels this function only      The  onevent property seems to override everything and the behavior of ev preventDefault   and return false  can be rather unpredictable  In either case  handlers registered via addEventlistener seem to be easier to write and reason about  There is also attachEvent  quot onevent quot   callback  from Internet Explorer s non-standard implementation  but this is beyond deprecated and doesn t even pertain to JavaScript  it pertains to an esoteric language called JScript   It would be in your best interest to avoid polyglot code as much as possible  A helper class To address confusion complaints  I ve written a  quot class quot  that does this abstraction  pastebin link   function Input el       var parent   el          map               intervals                function ev kdown ev                map ev key    true          ev preventDefault            return                 function ev kup ev                map ev key    false          ev preventDefault            return                 function key down key                return map key              function keys down array array                for var i   0  i  lt  array length  i                if  key down array i                    return false           return true                 function keys down arguments                 return keys down array Array from arguments                   function clear                 map                      function watch loop keylist  callback                return function                if keys down array keylist                   callback                         function watch name  callback                var keylist   Array from arguments  splice 2            intervals name    setInterval watch loop keylist  callback   1000 24              function unwatch name                clearInterval intervals name            delete intervals name              function detach                 parent removeEventListener  quot keydown quot   ev kdown           parent removeEventListener  quot keyup quot   ev kup                  function attach                 parent addEventListener  quot keydown quot   ev kdown           parent addEventListener  quot keyup quot   ev kup                  function Input                 attach             return               key down  key down              keys down  keys down arguments              watch  watch              unwatch  unwatch              clear  clear              detach  detach                           return Input       This class doesn t do everything and it won t handle every conceivable use case  I m not a library guy  But for general interactive use it should be fine  To use this class  create an instance and point it to the element you want to associate keyboard input with  var input txt   Input document getElementById  quot txt quot      input txt watch  quot print 5 quot   function        txt value     quot FIVE  quot       quot Control quot    quot 5 quot     What this will do is attach a new input listener to the element with  txt  let s assume it s a textarea   and set a watchpoint for the key combo Ctrl 5  When both Ctrl and 5 are down  the callback function you passed in  in this case  a function that adds  quot FIVE  quot  to the textarea  will be called  The callback is associated with the name print 5  so to remove it  you simply use  input txt unwatch  quot print 5 quot     To detach input txt from the txt element  input txt detach     This way  garbage collection can pick up the object  input txt   should it be thrown away  and you won t have an old zombie event listener left over  For thoroughness  here is a quick reference to the class s API  presented in C Java style so you know what they return and what arguments they expect   Boolean  key down  String key    Returns true if key is down  false otherwise  Boolean  keys down  String key1  String key2         Returns true if all keys key1    keyN are down  false otherwise  void     watch  String name  Function callback  String key1  String key2         Creates a  quot watchpoint quot  such that pressing all of keyN will trigger the callback void     unwatch  String name    Removes said watchpoint via its name void     clear  void    Wipes the  quot keys down quot  cache  Equivalent to map      above void     detach  void    Detaches the ev kdown and ev kup listeners from the parent element  making it possible to safely get rid of the instance  Update 2017-12-02 In response to a request to publish this to github  I have created a gist  Update 2018-07-21 I ve been playing with declarative style programming for a while  and this way is now my personal favorite  fiddle  pastebin Generally  it ll work with the cases you would realistically want  ctrl  alt  shift   but if you need to hit  say  a w at the same time  it wouldn t be too difficult to  quot combine quot  the approaches into a multi-key-lookup   I hope this thoroughly explained answer mini-blog was helpful

User · Answer

case 65    A jp   1  setTimeout  jp   0    100    if pj  gt  0    ABFunction    pj   0    break   case 66    B pj   1  setTimeout  pj   0    100    if jp  gt  0    ABFunction    jp   0    break    Not the best way  I know

User · Answer

If one of keys pressed is Alt   Crtl   Shift you can use this method   document body addEventListener  keydown   keysDown actions      function actions           do stuff here       simultaneous pressing Alt   R function keysDown  cb      return function  zEvent        if  zEvent altKey  amp  amp   zEvent code      KeyR            return cb

User · Answer

Just making something more stable   var keys         document  keydown function  e         if e which    32    e which    70       keys push e which       if keys length    2  amp  amp  keys indexOf 32     -1  amp  amp  keys indexOf 70     -1                                      alert  quot it WORKS    quot      MAKE SOMETHING HERE---------------- gt                                     keys length   0       else if  keys indexOf 32     -1  amp  amp  keys indexOf 70     -1      keys indexOf 32     -1  amp  amp  keys indexOf 70     -1   amp  amp   keys indexOf 32   gt  1    keys indexOf 70   gt  1         else          keys length   0         else      keys length   0

User · Answer

I d try adding a keypress Event handler upon keydown  E g   window onkeydown   function            evaluate key and call respective handler     window onkeypress   function               evaluate key and call respective handler          window onkeyup   function         window onkeypress   void 0        This is just meant to illustrate a pattern  I won t go into detail here  especially not into browser specific level2  Event registration    Post back please whether this helps or not

User · Answer

I like to use this snippet  its very useful for writing game input scripts var keyMap        window addEventListener  keydown    e   gt       if  keyMap includes e keyCode            keyMap push e keyCode             window addEventListener  keyup    e   gt       if keyMap includes e keyCode            keyMap splice keyMap indexOf e keyCode   1             function key x       return  keyMap includes x       function checkGameKeys        if key 32               Space Key           if key 37               Left Arrow Key           if key 39               Right Arrow Key           if key 38               Up Arrow Key           if key 40               Down Arrow Key           if key 65               A Key           if key 68               D Key           if key 87               W Key           if key 83               S Key

User · Answer

for who needs complete example code  Right Left added  var keyPressed       document addEventListener  keydown   function e        keyPressed e key   e location    true       if keyPressed Shift1    true  amp  amp  keyPressed Control1    true              Left shift CONTROL pressed          keyPressed          reset key map           if keyPressed Shift2    true  amp  amp  keyPressed Control2    true              Right shift CONTROL pressed          keyPressed                 false    document addEventListener  keyup   function e       keyPressed e key   e location    false      keyPressed          false

[javascript] How to detect if multiple keys are pressed at once using JavaScript?

The answer is

Examples related to javascript

Examples related to keydown

Tags