Common Key Codes

The event.keyCode values for common use hotkeys

Different keys have code associated with them, here's a list of the common use codes for reference.

Useing the floowing piece of JavaScript you can see the values associated with the different keys, from the event.keyCode property :

$(document).bind('keydown', function(evt){
  console.log(evt.keyCode);
});

Special / Meta Keys

I've only got access to Mac atm, so I'll have to run the test again on another windows machine.

  • cmd - 91 (left)

  • cmd - 93 (right)

  • shift - 16

  • ctrl - 17

  • alt - 18

  • left - 37

  • up - 38

  • right - 39

  • down - 40

  • space - 32

Adding a simple hotkey

I'm going to bind against Cmd+Left & Cmd+Right so I can cycle bewteen some open tabs.

We could track the Cmd / 91/93 key down/up state but the DOM event object has a .metaKey boolean property which is set true if the meta key is depressed while the Left / Right cursors are hit.

Based on these properties the following code will Log Left or Right to the console:

$(document).bind('keydown', function(evt){
  var L = 37; // Left
  var R = 39; // Right

  // Meta AND (Left OR Right)
  if( evt.metaKey && (      
      evt.keyCode == L ||   
      evt.keyCode == R)) {  

    console.log(
      'Switch Tab Direction : ' + ( 
        evt.keyCode == L 
          ? 'LEFT' 
          : 'RIGHT'
      )
    );

    // Stop Propergation of the event
    evt.preventDefault();
    return false;

  }

  // Allow the event to bubble up
  return true;
});

Running this inside the console and triggering some events you'll see the something like the following:

Switch Tab Direction : LEFT
Switch Tab Direction : RIGHT 
Switch Tab Direction : LEFT 
Switch Tab Direction : RIGHT 
Switch Tab Direction : LEFT
Switch Tab Direction : RIGHT

Try it yourself

I've included the above script in this page, click the button below to attach to the keydpwn event.

Bind keyDown Handler