Key Code Inspector
Press any key to inspect its event properties — key, code, keyCode, location, modifiers, and friendly hotkey combo. Live modifier indicators, press history, copy-ready listener snippet, and a reference table of common key codes. Essential for building keyboard shortcuts, games, and accessible UIs.
Common key codes reference
| Key | event.key | event.code | keyCode | Location |
|---|
About this tool
Keyboard events in browsers carry a confusing tangle of properties — key, code, keyCode, which, location — and they differ across operating systems and layouts. This tool lets you press a key and immediately see every property the event exposes, so you can write shortcuts that match on the right value.
Click the dashed capture zone and press a key combination, for example Ctrl+Shift+K. The combo display shows the friendly string, the modifier pills light up, and the property rows list the exact values to compare against in code. A ready-to-paste listener snippet (vanilla JS, React, or Vue) is generated from the last press, and a reference table covers the keys you'll reach for most.
Prefer matching the physical key regardless of layout? Use event.code (e.g. KeyS). Prefer matching what the user intended? Use event.key (e.g. s). The reference table makes the difference concrete.
FAQ
What is the difference between event.key and event.code? ›
event.key reflects the logical key produced after layout and modifier processing — on an AZERTY keyboard pressing the top-row "a" position yields "q". event.code reflects the physical key position (e.g. KeyQ) and is stable across layouts. Use code for games and shortcuts that must be layout-independent; use key for text input.
Should I use keyCode in new code? ›
No. keyCode and which are deprecated and inconsistent across browsers. They remain listed here because legacy code and many tutorials still reference them. For new work, prefer key and code.
Why does pressing the same key show a different location? ›
The location field distinguishes physical duplicates: 0 is the standard position, 1 and 2 are the left and right instances of modifier keys like Shift and Alt, and 3 is the numeric keypad. This lets you bind, for example, only the numpad Enter separately.
Does the tool capture keys when I am typing in another field? ›
No. To avoid hijacking normal typing, the tool ignores key presses while focus is in an input, textarea, or select. Click the dashed capture zone to make it the active target, or just press keys while nothing on the page is focused.