JavaScript Keycode Tester,
inspect keyboard events in real time.

Developer guide

Keyboard events in JavaScript: key, code, and keyCode explained.

Every time a user presses a key, the browser fires a sequence of events: keydown (fires immediately and repeats while held), the deprecated keypress (printable characters only), and keyup (fires once on release). The event object carries several properties describing which key was pressed and how — but they are not all equal, and some should no longer be used.

The three key-identification properties

Modern browsers expose three distinct ways to identify a keyboard event:

• e.key — the logical character or action the key represents in the current locale. Pressing Shift+A gives "A"; just A gives "a"; pressing Enter gives "Enter". On a French AZERTY keyboard, the key in the Q position produces "a" because that is what that key means on that layout.
• e.code — the physical key position on a standard US keyboard, regardless of locale or layout. The top-left alphanumeric key is always "KeyQ" whether the user has QWERTY, AZERTY, or Dvorak. Numeric row keys are "Digit1"–"Digit0"; arrow keys are "ArrowLeft", "ArrowRight", etc.
• e.keyCode — a legacy numeric code. Pressing A gives 65, Enter gives 13, Escape gives 27. This property is deprecated and should not be used in new code. It was designed around US keyboards and handles international characters poorly.

Why e.keyCode is deprecated

The keyCode property was introduced in the early web when internationalization was an afterthought. Its core problem: it conflates two separate concepts — the physical key pressed, and the character the user intended to type.

• On a US QWERTY keyboard, pressing the A key reports keyCode 65.
• On a French AZERTY keyboard, pressing the key in the Q position (which produces the letter A) reports a different keyCode because the physical key layout differs.

The DOM Level 3 Events specification (2012) solved this by introducing e.key and e.code as clearly separated concepts. Browser support has been universal since 2016. All new code should use them exclusively.

When to use e.key vs e.code

The choice comes down to whether you care about what the user typed or where their fingers are:

• Use e.key for form shortcuts, accessibility patterns, and text processing. Check e.key === 'Enter' to submit, e.key === 'Escape' to close a modal, or e.key === 'ArrowDown' to move a menu cursor.
• Use e.code for game controls, musical apps, or any interface where the spatial position of keys matters more than their labels. e.code === 'KeyW' means move forward on every keyboard layout without you writing localization code.

// Modern: use e.key for logical intent
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeModal();
  if (e.key === 'Enter') submitForm();
  if (e.ctrlKey && e.key === 's') saveDocument();   // Ctrl+S
  if (e.metaKey && e.key === 's') saveDocument();   // Cmd+S on Mac
});

// For game controls: use e.code for physical position
document.addEventListener('keydown', (e) => {
  if (e.code === 'KeyW' || e.code === 'ArrowUp')    moveForward();
  if (e.code === 'KeyA' || e.code === 'ArrowLeft')  moveLeft();
  if (e.code === 'KeyS' || e.code === 'ArrowDown')  moveBack();
  if (e.code === 'KeyD' || e.code === 'ArrowRight') moveRight();
});

Modifier keys: Shift, Ctrl, Alt, Meta

The KeyboardEvent exposes four boolean modifier flags:

• e.shiftKey — true when Shift is held. Changes character output (a → A, 1 → !) and is used in shortcuts like Shift+Tab (reverse tab order) or Shift+Enter (new line vs. submit).
• e.ctrlKey — true when Ctrl is held. The standard modifier for keyboard shortcuts on Windows and Linux (Ctrl+C, Ctrl+Z, Ctrl+S).
• e.altKey — true when Alt is held (Option on Mac). Used for special characters on many keyboard layouts and for alt-code shortcuts.
• e.metaKey — true when the Meta key is held: the Windows key (⊞) on Windows/Linux, or the Command key (⌘) on Mac. The standard modifier for Mac keyboard shortcuts (⌘C, ⌘Z, ⌘S).

You can detect any combination: e.ctrlKey && e.shiftKey && e.key === 'Z' catches Ctrl+Shift+Z (redo). Note that some OS-level shortcuts intercept the event before JavaScript runs.

Key location: standard, left, right, numpad

Many keyboards have physically identical keys in multiple places: two Shift keys, two Ctrl keys, digits on both the number row and the numpad. The e.location property tells you which copy was pressed:

The e.repeat flag for held keys

When a key is held down, the OS auto-fires repeated keydown events after an initial delay (~500 ms) and then at a steady rate. During these repeated events, e.repeat is true. The keyup event fires only once when the key is released, with e.repeat === false.

Use e.repeat to prevent actions from firing dozens of times per second while a key is held. For example, block form submission when the user holds Enter, or cap movement speed in a game.

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.repeat) {
    submitForm(); // fires exactly once per press
  }
});

Common keyCode reference table

Although deprecated, keyCode values appear throughout legacy codebases. This table lists the most common values:

Keyboard event sequence

A single key press fires events in this order:

keydown  →  (keypress — deprecated, printable keys only)  →  keyup

If the key is held, the browser continues firing keydown (with e.repeat === true) at the OS repeat rate. Only one keyup fires on release. This tool listens to keydown, which fires for all keys including non-printable ones like Escape, arrow keys, and function keys.

Browser and OS differences

Some key combinations are intercepted by the browser or OS before reaching JavaScript. Common examples: Cmd+W closes the tab (macOS), Ctrl+T opens a new tab, Ctrl+W closes the current window. You cannot capture these in JavaScript. For accessibility, avoid overriding well-known shortcuts (Ctrl+C, Ctrl+Z, Tab, Escape) unless your application clearly warrants it.