Keyboard Event Tester - JavaScript Key Event Debugger

Test keyboard events in real-time. See keydown/keyup events, keyCodes, event.key, event.code, and modifier states instantly.

🎹 Press any key to see its event data

Understanding JavaScript Keyboard Events

JavaScript provides three keyboard events: keydown, keypress (deprecated), and keyup. Each event provides properties describing which key was pressed and the state of modifier keys. This tester helps you understand exactly what data is available during keyboard interactions.

Keyboard Event Types

  • keydown: Fires when a key is pressed down. Repeats if held.
  • keyup: Fires when a key is released.
  • keypress: Deprecated. Use keydown instead.

Key Properties Explained

  • event.key: The character produced ("a", "Shift", "Enter").
  • event.code: Physical key ("KeyA", "ShiftLeft", "Enter").
  • event.keyCode: Numeric code (deprecated but widely used).
  • event.which: Alias for keyCode (deprecated).

Location Values

  • 0 (Standard): Keys that appear once (letters, numbers).
  • 1 (Left): Left version of duplicate keys (Left Shift).
  • 2 (Right): Right version of duplicate keys (Right Ctrl).
  • 3 (Numpad): Numeric keypad keys.

Common Use Cases

  • Keyboard shortcuts: Detect Ctrl+S, Alt+Tab combinations.
  • Game controls: WASD movement, spacebar jump.
  • Form navigation: Enter to submit, Escape to cancel.
  • Accessibility: Keyboard-only navigation support.

Best Practices

  • Use event.key for character input, event.code for physical keys.
  • Always provide visual feedback for keyboard actions.
  • Don't override browser defaults (Ctrl+C, Ctrl+V).
  • Test with different keyboard layouts.