JS Keycode Inspector

W3C KeyboardEvent Specifications & Legacy keyCodes vs Modern Event.key

Handling keyboard interactions across web applications is essential for building accessible user interfaces, keyboard navigation shortcuts, game controls, and modal dialog handlers. Historically, web developers relied on the legacy event.keyCode and event.which numeric properties. However, the W3C officially deprecated these properties in the DOM Level 3 Events specification due to inconsistent cross-platform mappings and international keyboard layout failures.

Modern web development relies on two distinct, complementary standard properties:

1. event.key (Logical Meaning): Represents the printable character or semantic name of the key pressed (e.g. "Enter", "Escape", "a", "A", "ArrowDown"). This property accounts for keyboard modifiers (such as Shift and AltGraph) and international localization.
2. event.code (Physical Key Position): Represents the physical key location on the hardware keyboard (e.g. "KeyA", "Digit1", "Space", "Enter"). The code remains unchanged regardless of whether the user is typing in QWERTY, AZERTY, Dvorak, or Cyrillic layouts.

Our JS Keycode Inspector captures live keyboard events, displaying exact values for event.key, event.code, event.keyCode, modifier states (ctrlKey, altKey, shiftKey, metaKey), and location indexes in real time.

Production JavaScript Event Listener Pattern

Below is the recommended accessible keyboard event listener pattern for modern web applications:

// Accessible keyboard interaction pattern
document.addEventListener('keydown', (event) => {
  // Check for modifier keys
  const isCmdOrCtrl = event.metaKey || event.ctrlKey;

  // Use event.key for semantic actions
  if (event.key === 'Escape') {
    closeActiveModal();
  }

  // Keyboard shortcut: Cmd+K or Ctrl+K (Command Palette)
  if (isCmdOrCtrl && event.key.toLowerCase() === 'k') {
    event.preventDefault(); // Prevent browser search focus
    openCommandPalette();
  }

  // Use event.code for physical gaming/directional controls
  if (event.code === 'KeyW' || event.code === 'ArrowUp') {
    movePlayerForward();
  }
});

Understanding Key Locations: Standard, Left, Right & Numpad

The event.location attribute differentiates between duplicate keys found across keyboards:

• 0 (DOM_KEY_LOCATION_STANDARD): Standard keys that only appear once or have no left/right distinction.
• 1 (DOM_KEY_LOCATION_LEFT): The left-hand modifier key (e.g. Left Shift, Left Ctrl, Left Alt/Option).
• 2 (DOM_KEY_LOCATION_RIGHT): The right-hand modifier key (e.g. Right Shift, Right Ctrl, AltGraph).
• 3 (DOM_KEY_LOCATION_NUMPAD): Keys located on the dedicated numeric keypad (e.g. Numpad Enter, Numpad 5).

IME Composition & International Input Handling

When users type in languages requiring Input Method Editors (IME) like Japanese, Chinese, or Korean, typing involves multi-keystroke composition buffers. During composition, event.isComposing is set to true and event.keyCode reports 229. Modern event listeners must verify !event.isComposing before triggering submission shortcuts to prevent premature form execution.

KeyboardEvent.key vs KeyboardEvent.code: Layouts & Scancode Distinctions

In modern web browsers, the W3C UI Events specification distinguishes between event.key (which represents the printable character produced by the keypress, accounting for active keyboard layout, Shift state, and Caps Lock) and event.code (which represents the physical scancode location of the key on the hardware keyboard, independent of language layout).

For example, pressing the physical key next to the Tab key on a French AZERTY layout produces code: 'KeyA' but key: 'q'. Games and visual shortcuts requiring physical spatial orientation (WASD controls) must bind to event.code, while text input filters and typing assistants should evaluate event.key.

Frequently Asked Questions