Keylistener in Javascript

Question

I m looking for a KeyListener for a game I m developing in JavaScript  I have no idea how this would work in real code but it would be something like this    if keyPress    upKey        playerSpriteX    10    else if keyPress    downKey        playerSpriteY -  10       etc     I searched it up  and Google came up with things that involved AJAX which I don t understand yet  Is there a built in function in JavaScript that does this

User · Answer

The code is  document addEventListener  keydown   function event       alert event keyCode          This return the ascii code of the key  If you need the key representation  use event key  This will return  a    o    Alt

User · Answer

A bit more readable comparing is done by casting event key to upper case  I used onkeyup - needed the event to fire once upon each key tap    window onkeyup   function event        let key   event key toUpperCase        if   key     W                  W  key is pressed       else if   key     D                  D  key is pressed           Each key has it s own code  get it out by outputting value of  key  variable  eg for arrow up key it will be  ARROWUP  -  casted to uppercase

User · Answer

JSFIDDLE DEMO  If you don t want the event to be continuous  if you want the user to have to release the key each time   change onkeydown to onkeyup  window onkeydown   function  e        var code   e keyCode   e keyCode   e which      if  code     38      up key         alert  up          else if  code     40      down key         alert  down

User · Answer

Did you check the small Mousetrap library    Mousetrap is a simple library for handling keyboard shortcuts in JavaScript

User · Answer

Here s an update for modern browsers in 2019   x000D   x000D  let playerSpriteX   0  x000D   x000D  document addEventListener  keyup    e    gt    x000D    if  e code      ArrowUp          playerSpriteX    10 x000D    else if  e code      ArrowDown   playerSpriteX -  10 x000D   x000D    document getElementById  test   innerHTML    playerSpriteX       playerSpriteX  x000D      x000D  Click on this window to focus it  and hit keys up and down x000D   lt br gt  lt br gt  lt br gt  x000D   lt div id  test  gt playerSpriteX   0 lt  div gt  x000D   x000D   x000D      Original answer from 2013  window onkeyup   function e       var key   e keyCode   e keyCode   e which      if  key    38           playerSpriteX    10      else if  key    40           playerSpriteX -  10           FIDDLE

[javascript] Keylistener in Javascript

Examples related to javascript

Examples related to keyboard

Examples related to key

Examples related to keylistener