JavaScript KeyCode & Keyboard Event Inspector

Press any key on your keyboard to instantly inspect event.key, event.code, keyCode numbers, and modifier combinations.

Press any key on your keyboard

⌘ Meta / CmdCtrlAlt / OptionShift

event.key"k"

event.code"KeyK"

event.keyCode (Deprecated)"75"

event.location"Standard (0)"

Recent Key Press History

Type keys to see history log...

React Event Listener Snippet

// React Keyboard Event Listener
useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'k' && e.metaKey ) {
      console.log('Key pressed:', e.key);
    }
  };
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);

Modern JavaScript Keyboard Events Explained

Handling keyboard input across operating systems and browser versions requires understanding the distinction between modern W3C standards (event.key and event.code) and deprecated legacy numeric properties (event.keyCode and event.which).

`event.key` vs `event.code`

event.key: Represents the actual character generated by the key press after taking into account keyboard layout and modifier keys (e.g. pressing a produces "a", while Shift + a produces "A").
event.code: Represents the physical physical key on the keyboard hardware regardless of active language layout (e.g. the key next to Caps Lock is always "KeyA" on QWERTY, AZERTY, and Dvorak keyboards). Use event.code for game controls and universal shortcut bindings.
event.keyCode: Deprecated numeric ASCII/virtual key codes. Modern web apps should migrate exclusively to event.key or event.code.

JavaScript KeyCode & Keyboard Event Inspector

Modern JavaScript Keyboard Events Explained

event.key vs event.code

`event.key` vs `event.code`