Keycode Finder
Press any key to see its JavaScript key event values
Press any key
—
Common Keys Reference
| Key | Code | keyCode | Description |
|---|
Press any key and instantly see everything the browser reports about it: event.key, event.code, the deprecated event.which and event.keyCode numbers, and which modifiers (Ctrl, Shift, Alt, Meta) were held. Below the live display, a searchable reference table lists the key, code, and legacy keyCode values for letters, digits, function keys, arrows, and more — handy when you cannot press the key right now.
How to Use
- Press a key: Click the page and press any key. The big display shows its event.key, with event.code, which, and keyCode in the cards below.
- Check modifiers: Hold Ctrl, Shift, Alt, or Meta while pressing a key — the active badges light up.
- Search the reference table: Type a key name, code, or description (like 「enter」 or 「F5」) to filter the common-keys table.
- Copy the values: Use the displayed key, code, or keyCode in your own event handlers.
Features
- Live capture of event.key, event.code, event.which, and event.keyCode
- Real-time modifier state indicators for Ctrl, Shift, Alt, and Meta
- Searchable reference table covering letters, digits, F1–F12, arrows, editing keys, modifiers, punctuation, and the numpad
- Plain-language description of each physical key
- Works entirely in your browser — no keystrokes ever leave the page
key vs code vs keyCode: Which One Should You Use?
Modern code should branch on event.key when you care about meaning («did the user press Enter?») and on event.code when you care about position («the WASD cluster», regardless of layout). The numeric keyCode and which properties are deprecated, but they still appear in legacy libraries and older Stack Overflow answers, so this tool shows them side by side. One gotcha: for printable characters, keyCode reflects the unshifted uppercase value — pressing a and Shift+A both report 65 — while event.key gives you 「a」 versus 「A」 exactly.
Use Cases
- Keyboard shortcuts: Verify the exact key and modifier flags before wiring up a hotkey handler.
- Game controls: Find layout-independent event.code values for WASD-style movement.
- Bug reports: Confirm what a user with a non-US keyboard layout actually produces.
- Learning: Explore how browsers report keys, from arrows to numpad operators.
Related Tools
Frequently Asked Questions
What is the difference between event.key and event.code?
event.key tells you the character or named value the key produced, which changes with your keyboard layout and modifier keys — for example pressing A with Shift gives 「A」 instead of 「a」. event.code identifies the physical key position (like KeyA) and stays the same regardless of layout, which makes it the right choice for game controls and shortcuts.
Why are keyCode and which marked as deprecated?
Both are legacy properties from before the KeyboardEvent standard settled. They still work in every browser and return the same number (for example 13 for Enter, 27 for Escape), but the specification recommends event.key and event.code instead. This tool shows them because plenty of older code and tutorials still rely on them.
Why does my letter key show KeyA when my keyboard is not QWERTY?
event.code is based on the physical position of the key as if it were a standard US layout. On an AZERTY keyboard, the key labeled Q sits where KeyA is, so pressing it reports code KeyA with key q. Check event.key for the actual character produced.
How do I detect modifier keys like Ctrl, Shift, Alt and Meta?
Every keyboard event carries four boolean flags: ctrlKey, shiftKey, altKey and metaKey. The tool lights up a badge for each modifier held while you press a key. Meta is the Windows key on PCs and the Command key on macOS.
Do some keys not show up in the tool?
Browsers reserve certain combinations and keys. F12 usually opens DevTools, and OS-level shortcuts like Alt+Tab never reach the page. Modifier-only presses also have no printable key value, so the display shows the modifier name instead.