JavaScript KeyCode Finder

You’re building a keyboard shortcut system and need to know: when a user presses Ctrl+Shift+/ on a German keyboard, what does event.key return? Is it / or #? What about event.code — is it Slash or IntlHash? And event.keyCode (the deprecated one your legacy code still uses) — is it 191 or something else? You need a tool that shows all three values simultaneously when you press a key.

Why This Finder (Not the JavaScript Event KeyCodes Reference)

PureDevTools has a JavaScript Event KeyCodes reference page with lookup tables. This tool is a live key press detector — press any key and instantly see event.key, event.code, event.keyCode, event.which, event.location, and modifier states (ctrlKey, shiftKey, altKey, metaKey). Use the reference for lookup tables; use this finder to test actual key presses on your keyboard.

What Is a JavaScript KeyboardEvent?

When a user presses a key in the browser, the browser fires keydown, keypress, and keyup events. Each event carries a set of properties that identify the key and its state. Developers use these properties to build keyboard shortcuts, game controls, accessibility features, and interactive UIs.

The modern standard for reading keyboard input is the KeyboardEvent interface, part of the DOM specification.

KeyboardEvent Properties Explained

event.key — Recommended

event.key returns the value of the key pressed, taking into account the current modifier state (Shift, AltGr, CapsLock, etc.). This is the property you should use in new code.

document.addEventListener('keydown', (e) => {
  console.log(e.key); // "a", "A" (with Shift), "Enter", "ArrowLeft", "Shift", etc.
});

Key characteristics:

• Returns the actual character: "a" (lowercase), "A" (with Shift pressed)
• Returns a named value for non-printable keys: "Enter", "Backspace", "ArrowUp", "F1"
• Returns " " (a space character) for the Space bar
• Returns "Dead" for dead keys (accent combining characters)

event.code — Layout-Independent

event.code returns the physical key identifier — which key on the keyboard was pressed, regardless of the current keyboard layout or modifier state.

document.addEventListener('keydown', (e) => {
  console.log(e.code); // "KeyA", "Digit1", "ShiftLeft", "Enter", "F5"
});

Key characteristics:

• "KeyA" through "KeyZ" for letter keys
• "Digit0" through "Digit9" for number row keys
• "ShiftLeft" vs "ShiftRight" to distinguish left and right Shift
• "ControlLeft", "AltLeft", "MetaLeft" for other modifier pairs
• Unaffected by Shift, CapsLock, or layout — "KeyA" is always the physical A key

Use event.code for keyboard shortcuts that should work regardless of language or input method. Use event.key when you care about the character value.

event.keyCode — Deprecated

event.keyCode is the legacy numeric code for the key pressed. It was standardized inconsistently across browsers and is now officially deprecated in the W3C spec. Avoid using it in new code.

// Avoid in new code:
if (e.keyCode === 13) { /* Enter */ }

// Prefer:
if (e.key === 'Enter') { /* Enter */ }

Common values you may encounter:

• 8 — Backspace
• 9 — Tab
• 13 — Enter
• 16 — Shift
• 17 — Control
• 18 — Alt
• 27 — Escape
• 32 — Space
• 37–40 — Arrow keys (Left, Up, Right, Down)
• 65–90 — Letters A–Z (always uppercase code regardless of Shift)
• 48–57 — Number row 0–9

event.which — Deprecated

event.which was intended to provide the Unicode code point of the key character for keypress events. Like keyCode, it is deprecated and inconsistently implemented. For keydown events, event.which typically equals event.keyCode.

event.location — Key Position

event.location distinguishes between multiple copies of the same key (e.g., left vs. right Shift, numpad digits vs. row digits).

Modifier Properties

Keyboard Event Types: keydown vs. keyup vs. keypress

// Recommended approach: use keydown
element.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeModal();
  if (e.key === 'Enter' && e.ctrlKey) submitForm();
});

Building Keyboard Shortcuts

Single Key Shortcuts

document.addEventListener('keydown', (e) => {
  // Avoid shortcuts that conflict with browser defaults
  if (e.key === '/') {
    e.preventDefault();
    focusSearch();
  }
});

Modifier + Key Combinations

document.addEventListener('keydown', (e) => {
  // Ctrl+S (or Cmd+S on macOS)
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }

  // Ctrl+Shift+P
  if (e.ctrlKey && e.shiftKey && e.key === 'P') {
    e.preventDefault();
    openCommandPalette();
  }
});

Preventing Default Behavior

Call e.preventDefault() only when you intentionally want to override the browser’s default action (e.g., preventing the browser’s save dialog when Ctrl+S is pressed). Be careful not to block browser shortcuts like Ctrl+T, Ctrl+W, or F5.

Platform-Specific Shortcuts (Ctrl vs. Meta)

// Works on both Windows/Linux (Ctrl) and macOS (Cmd)
const isCtrlOrMeta = e.ctrlKey || e.metaKey;
if (isCtrlOrMeta && e.key === 'k') openSearch();

Common event.key Values Reference

Printable Characters

All printable characters return a single-character string matching the actual output (including Shift state). For example, pressing a returns "a", pressing Shift+a returns "A".

Non-Printable Keys

Common event.code Values Reference

Why Is event.key Better Than event.keyCode?

1. Internationalization: event.key returns the actual character typed, so "é" on a French keyboard or "ñ" on a Spanish keyboard — not a numeric code you need to map.
2. Readability: e.key === 'Enter' is self-documenting. e.keyCode === 13 requires a lookup.
3. Specification compliance: event.keyCode is deprecated in the W3C spec and may be removed from future browsers.
4. Consistency: event.key values are standardized across browsers, while event.keyCode had historical cross-browser inconsistencies.
5. Modifier awareness: event.key already reflects the Shift/AltGr state, so you get "A" (not "a") when Shift is pressed — no extra logic required.

Frequently Asked Questions

How do I check if a key is a modifier key? Check if event.key is one of the modifier names: "Shift", "Control", "Alt", "Meta", "CapsLock", "NumLock", "ScrollLock".

const isModifier = ['Shift', 'Control', 'Alt', 'Meta', 'CapsLock'].includes(e.key);

What is the event.code for the Space key? The event.code for Space is "Space", and event.key returns " " (a single space character).

How do I detect arrow keys?

const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
if (ARROW_KEYS.includes(e.key)) { /* handle arrow */ }

How do I prevent tab navigation inside a component?

element.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    e.preventDefault();
    // Implement custom focus management
  }
});

Why does event.code return "KeyA" instead of just "A"? The "Key" prefix distinguishes key codes from other code categories like "Digit" (number row), "Numpad" (numpad), "F" (function keys), and named keys ("Enter", "Space", etc.). This makes the namespace unambiguous.

Does event.keyCode still work in all browsers? Yes, it is still supported in all major browsers for backwards compatibility, but it is officially deprecated and should not be used in new code. Future browser versions may eventually remove it.