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

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

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

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

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

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

[javascript] Keylistener in Javascript

Examples related to javascript

Examples related to keyboard

Examples related to key

Examples related to keylistener