JavaScript Key Codes: Every Keyboard Key and Its Event Properties

Understanding JavaScript Keyboard Events

Keyboard events in JavaScript expose rich information about which key was pressed, in what context, and with which modifier keys. Understanding the distinction between the different key properties is essential for building accessible keyboard interfaces, games, and productivity tools.

Key Event Properties

When a keyboard event fires, the event object contains several properties:

event.key (Recommended)

Returns the semantic value of the key pressed:

• Letter keys: "a", "A", "z", "Z"
• Special keys: "Enter", "Backspace", "Tab", "Escape", "ArrowLeft"
• Modifier keys: "Shift", "Control", "Alt", "Meta"
• Function keys: "F1" through "F12"

This is the modern standard for identifying keys. The value is locale-aware (handles international keyboards correctly) and semantic (tells you what the key means, not its physical location).

event.code (Physical Key Location)

Returns the physical key identifier on the keyboard, independent of the current keyboard layout:

• "KeyA", "KeyB", "KeyZ" for letter keys
• "Digit1", "Digit2" for number row digits
• "Numpad1", "Numpad2" for numpad digits
• "ArrowLeft", "ArrowUp" for arrow keys
• "ShiftLeft", "ShiftRight" distinguish which Shift key

Use event.code when physical key position matters (gaming WASD controls) and you want layout-independent behavior.

event.keyCode (Deprecated)

The numeric code for the key pressed. This legacy property has browser inconsistencies and should not be used in new code. For example, "A" is 65, "Enter" is 13, "Escape" is 27, "Space" is 32.

event.which (Deprecated)

Similar to keyCode but originally intended for mouse events. Also deprecated in favor of event.key.

Modifier Keys

Keyboard events expose modifier key state through boolean properties:

• event.shiftKey: Shift is held
• event.ctrlKey: Control is held
• event.altKey: Alt (Option on Mac) is held
• event.metaKey: Meta key (Windows key on PC, Command on Mac) is held

Common keyboard shortcuts use these combinations:

• Ctrl+C / Cmd+C: Copy
• Ctrl+Z / Cmd+Z: Undo
• Ctrl+Shift+Z / Cmd+Shift+Z: Redo
• Alt+F4: Close window (Windows)

Keyboard Event Types

Three main keyboard event types fire in sequence:

1. keydown: Fires when a key is pressed down. Repeats while held. Most keyboard shortcuts should listen here.
2. keypress (deprecated): Fired for printable characters only. Deprecated, use keydown instead.
3. keyup: Fires when a key is released. Never repeats.

For text input tracking, listen on keydown or use the input event on form elements.

Practical Event Handling Patterns

Detecting Keyboard Shortcuts

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault(); // Prevent browser's save dialog
    saveDocument();
  }
});

WASD Game Controls

const keys = new Set();
document.addEventListener('keydown', (e) => keys.add(e.code));
document.addEventListener('keyup', (e) => keys.delete(e.code));

function gameLoop() {
  if (keys.has('KeyW')) moveUp();
  if (keys.has('KeyS')) moveDown();
  if (keys.has('KeyA')) moveLeft();
  if (keys.has('KeyD')) moveRight();
  requestAnimationFrame(gameLoop);
}

Escape to Close Modal

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeModal();
});

Key Codes Reference

Commonly used key codes in JavaScript:

Accessibility and Keyboard Navigation

WCAG 2.1 requires all functionality to be operable by keyboard. Key principles:

• All interactive elements must receive keyboard focus
• Focus must be visible (no removing outline without alternative)
• Tab order must be logical and follow visual layout
• Custom widgets must implement appropriate keyboard patterns (arrow keys for menus, Enter/Space for activation)
• Modal dialogs must trap focus within them while open
• Provide skip navigation links to bypass repeated content

ARIA patterns like menu, listbox, dialog, and tablist define expected keyboard behaviors for complex widgets.

Using the Keycode Info Tool

Our tool:

1. Press any key — instantly shows all properties for that key event
2. Displays all properties — key, code, keyCode, which, charCode
3. Shows modifier state — which modifier keys are held
4. Copy values — one-click copy of any property value
5. Key history — track the last several key presses
6. Comparison mode — see how different keyboards report the same keys

Essential for debugging keyboard handling code, understanding browser differences, and implementing correct keyboard shortcuts.