Keycode Lookup

How to use it

1. Click anywhere on the page so the browser focuses it, then press any key.
2. The large tile shows event.key; the cards show event.code, the legacy event.keyCode and so on.
3. The modifier chips light up for Ctrl, Alt, Shift and Meta as you hold them.
4. Typing inside the test input also fires the listener — handy for checking how inputs see keys.
5. The history list keeps the last eight key presses for comparison.

Common use cases

• Shortcut implementation — confirm which event.code to use so a shortcut works on any layout.
• Layout debugging — see what key a non-QWERTY layout actually reports.
• Game input — check key codes and repeat behavior before wiring the handler.
• Teaching events — demonstrate the difference between key (character) and code (physical key).

Why it stays private

The listener is a local event handler; keystrokes are displayed and discarded in memory. Nothing is logged or transmitted — though as a matter of hygiene, avoid typing real passwords while testing.

FAQ

Q: Why do key and code differ? A: event.key is the character produced (layout-dependent), while event.code is the physical key position (layout-independent). For shortcuts, prefer code so KeyZ stays Ctrl+Z on AZERTY too.

Q: Is keyCode deprecated? A: Yes — keydown and keyup should use key or code. The legacy number is shown because old code and cheat sheets still reference it, and matching it saves a web search.

Q: Why did my arrow keys scroll the page? A: The tool only listens; it does not block default behavior, so arrows and Tab keep working normally. For shortcut code you write yourself, call preventDefault() when you handle the key.