JavaScript keycode finder

Each keyboard event describes the same key press three ways. Here is what you get for a few presses on US and French keyboards:

key follows the layout and modifiers, so it is right for text and letter shortcuts. code names the physical key after its spot on a US QWERTY board, so it is right for game controls that should stay in place on any layout. keyCode is a legacy number that differs between browsers and layouts; read it only to support old code.

A shortcut handler that works on Windows, Linux and Mac, and stays out of the way while people type in a form:

document.addEventListener('keydown', (event) => {
  if (event.isComposing) return;                 // IME is composing text
  const t = event.target;
  if (t.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(t.tagName)) return;

  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
    event.preventDefault();                      // stop the browser's own Ctrl+K
    openSearch();
  }
  if (event.key === 'Escape') closeDialog();
  if (event.code === 'KeyW' && !event.repeat) moveForward();   // physical key, ignore auto-repeat
});

React passes the same values on its synthetic event: onKeyDown={e => e.key === 'Enter' && submit()}. Press a key in the tool above and the Handler for this key panel writes this check for you, matching on key or code.

The letter keyCodes match the uppercase ASCII codes (A is 65 in both), and the top-row digits match ASCII "0" to "9". See the ASCII table for the rest. The full table with punctuation, numpad and modifier keys is in the tool above, and it downloads as CSV.

• Firefox numbers differ. MDN lists Firefox keyCodes of 59 for ;, 61 for = and 173 for -, where Chrome and Safari send 186, 187 and 189. Matching on event.key avoids this.
• AltGr is Ctrl + Alt on Windows. Typing @ or € with AltGr on many European layouts sets both ctrlKey and altKey, so a Ctrl+Alt shortcut can fire while someone types. event.getModifierState('AltGraph') tells them apart.
• Dead keys. Keys that start an accent (like ´ on many layouts) report event.key === 'Dead'. The finished character comes with the next key press.
• Left and right. event.location is 1 for the left Shift, Ctrl, Alt or Meta, 2 for the right one, 3 for the numpad and 0 for everything else. event.code also says it: ShiftLeft, ShiftRight.
• Some shortcuts never reach the page. Browsers keep Ctrl/⌘ + W, T and N for themselves, and the OS takes Alt+Tab and Alt+F4 on Windows. The tool above warns you when you press one.
• Phones are different. Many on-screen keyboards send keyCode 229 and key "Unidentified" for letters. Read the input's value in an input event instead.

Old code that compares numbers maps directly to key names:

// before                          // after
if (e.keyCode === 13) submit();      if (e.key === 'Enter') submit();
if (e.keyCode === 27) close();       if (e.key === 'Escape') close();
if (e.keyCode === 32) toggle();      if (e.key === ' ') toggle();
if (e.which === 37) prev();          if (e.key === 'ArrowLeft') prev();
if (e.keyCode >= 48 && e.keyCode <= 57) digit();   if (/^[0-9]$/.test(e.key)) digit();

Old browsers sent "Esc", "Left" and "Spacebar" (IE and old Edge), so if you must support them, check both names. For other browser details, see what is my user agent, which parses your browser, OS and client hints. More testing tools are in the testing tools directory.