KeyboardEvent.code

The KeyboardEvent.code property represents a physical key, that is value not changed neither by the modifier state, nor by keyboard layout.

If the inputting keyboard isn't a physical keyboard, e.g., using virtual keyboard or accessibility tools, web browsers should set proper code value for compatibility as far as possible.

Uninitialized value must be "" (empty string).

This is useful when you attempt to distinguish keys physically. However, you need to be careful when you reference this value for printable key events. For example, "KeyQ" is set for the "q" key of the QWERTY keyboard layout, the "'" key of the Dvorak keyboard layout and the "a" key of the AZERTY keyboard layout. This means that you cannot show the actual key label for users. In other words, it's impossible to generate a proper tutorial for all users if some of them use an unexpected keyboard layout.

Example

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the key event was already consumed.
  }

  switch (event.code) {
    case "KeyS":
      // Handle "s" key as "down arrow" key.
      break;
    case "KeyW":
      // Handle "w" key as "up arrow" key.
      break;
    case "KeyA":
      // Handle "a" key as "left arrow" key.
      break;
    case "KeyD":
      // Handle "d" key as "right arrow" key.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }

  // Consume the event for suppressing "double action".
  event.preventDefault();
}, true);

Specification

Browser compatibility

[1] Disabled on release builds: only available on Nightly, Aurora and Developer Editions. Starting with Gecko 38.0 (Firefox 38.0 / Thunderbird 38.0 / SeaMonkey 2.35), it's enabled in release builds, too.

[2] WebKit bug #149584

[3] Edge feature request on UserVoice

Code values

The following tables show what code values are used for each native scancode or virtual keycode.

Code values on Windows (When scancode is available)

Code values on Mac

On Mac OS X, it's hard to get scancode or something which can distinguish a physical key from a key event. Therefore, Gecko always maps code value from the virtual keycode.

Code values on Linux (X11) (When scancode is available)

Note that X has too many keys and some of them are not testable with usual keyboard. So, following table is created from source code which mapps from scancode to code value.

Code values on Android and Firefox OS (When scancode is available)