JavaScript Keycode Finder - Keyboard Event Tester

Understanding JavaScript Keyboard Events

When building interactive web applications, handling keyboard input is essential. JavaScript provides multiple properties on keyboard events, each serving different purposes. This tool helps you discover the exact values you need for your event handlers.

Key vs Code vs KeyCode

• event.key: The character produced by the key (e.g., "a", "A", "Enter"). Language/layout dependent.
• event.code: The physical key on the keyboard (e.g., "KeyA", "Enter"). Layout independent.
• event.keyCode: Legacy numeric code. Deprecated but still widely used for compatibility.

When to Use Each Property

Use event.key for Character Input

When you care about the actual character typed (like form input), use event.key. It respects keyboard layout (QWERTY vs AZERTY) and modifier keys (Shift for capitals).

Use event.code for Games and Shortcuts

For keyboard shortcuts and games, use event.code. Physical key positions matter more than the characters they produce. WASD controls work regardless of keyboard layout.

Use event.keyCode for Legacy Support

Older tutorials and browsers use keyCode. While deprecated, it's still supported for backward compatibility. Prefer modern properties in new code.

Common Key Codes Reference

• Enter: keyCode 13, code "Enter"
• Escape: keyCode 27, code "Escape"
• Space: keyCode 32, code "Space"
• Arrow Left: keyCode 37, code "ArrowLeft"
• Arrow Up: keyCode 38, code "ArrowUp"
• Arrow Right: keyCode 39, code "ArrowRight"
• Arrow Down: keyCode 40, code "ArrowDown"
• A-Z: keyCode 65-90, code "KeyA"-"KeyZ"
• 0-9: keyCode 48-57, code "Digit0"-"Digit9"
• F1-F12: keyCode 112-123, code "F1"-"F12"

Modifier Keys

Keyboard events include boolean properties for modifier keys:

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

Example: Keyboard Shortcut Handler

Common pattern for handling keyboard shortcuts in JavaScript:

document.addEventListener('keydown', (e) => {
  // Ctrl+S to save
  if (e.ctrlKey && e.code === 'KeyS') {
    e.preventDefault();
    saveDocument();
  }
  // Escape to close modal
  if (e.key === 'Escape') {
    closeModal();
  }
});