This JavaScript key code viewer shows the exact values your browser reports for a keyboard event: event.key, event.code, the legacy keyCode and which, plus the state of the modifier keys. Press any key and the panel updates instantly, so you can look up the value you need while building keyboard shortcuts, hotkeys or a custom key handler. It is the fastest reference for anyone who has ever asked what keyCode is Enter or what event.code the right arrow reports.
Modern web code should prefer event.key and event.code over the deprecated keyCode property. event.key gives you the character or named value, such as a, Enter or ArrowUp, and it respects the active keyboard layout. event.code gives you the physical position on the keyboard, such as KeyA or ArrowUp, which stays the same regardless of layout. This viewer shows both side by side so you can pick the right one for your use case, whether you are matching a shortcut by meaning or by physical position.
The legacy keyCode and which values are still included because a lot of older tutorials and libraries reference them. They are shown for completeness, but the panel makes clear that they are deprecated so you do not build new code on top of them. The modifier readout tells you whether Ctrl, Shift, Alt or Meta were held at the moment of the event, which is essential when you are detecting combinations like Ctrl and S or Cmd and K.
Because the tool captures raw DOM keyboard events, it doubles as a quick way to debug an unexpected shortcut. If a key combination is not firing in your own app, press it here first to confirm what the browser actually reports, then compare that against the condition in your handler. Everything runs locally in the browser, so no keystrokes leave your machine, and you can keep the page open as a scratchpad while you write your event code.
How this test works
This test attaches a keydown listener to the document and reads four properties straight off the event: event.key, event.code, the deprecated event.keyCode and the equally deprecated event.which, plus the four modifier booleans. Nothing is normalised, mapped or corrected on the way, so what you see is exactly what your browser reports on your operating system with your layout. That is the point: a specification tells you what should happen, and this tells you what does.
How to use the key code viewer
- Click the capture panel to give it keyboard focus.
- Press any key or key combination you want to inspect.
- Read the reported event.key, event.code, keyCode and which values.
- Check the modifier row to see whether Ctrl, Shift, Alt or Meta were held.
- Copy the value you need straight into your own keyboard handler.
Reference tables
These are server-rendered, so they are readable without running the test and quotable without running any JavaScript. Where a figure comes from a specification it is cited under the table; where it is our own judgement, the table says so.
| What it measures | What it cannot see |
|---|---|
| The exact event.key, event.code, keyCode and which values your browser reports | What another browser or another OS would report for the same physical key |
| Modifier state at the moment of the press (Shift, Control, Alt, Meta) | Whether a modifier was remapped by the OS or by keyboard firmware before it reached the browser |
| That a key produced no event at all | Why: a suppressed key looks identical to a broken one from inside the page |
Compiled by MyGearCheck from the browser APIs each test uses. Every limit listed here is a limit of the browser, not of your hardware.
Frequently asked questions
Should I use event.key, event.code or keyCode?
Use event.key when you care about the character or named action, and event.code when you care about the physical key position. Avoid keyCode in new code: it is deprecated and inconsistent across browsers. This viewer shows all of them so you can choose the right property.
What is the difference between event.key and event.code?
event.key reflects the logical value produced, which changes with the keyboard layout, so the same physical key can report different keys. event.code reflects the physical key position and does not change with layout, which makes it better for position-based shortcuts like WASD movement.
Why is keyCode deprecated?
keyCode returns numeric values that were never fully standardized and differ between browsers and platforms, especially for punctuation. The modern key and code properties replaced it. The value is still displayed here for reference with older code, but you should not rely on it for new work.
Do I have to click the page first?
No. The listener is on the document, so a key you press after the page loads is captured immediately without clicking anything first.
Why do some keys never show up?
The operating system claims a few keys before the browser sees them. PrintScreen is the usual example, and on many systems the browser only ever receives its keyup, or nothing at all.
Why does my keyCode differ from a table I found elsewhere?
Because keyCode is the deprecated legacy model and browsers do not agree on it for every key. Meta is the clearest case: it has been reported as 91, 93 and 224 depending on browser and operating system, which is why our reference table leaves that value empty instead of picking one.
Can I copy a value straight out of the viewer?
Yes. Each value is selectable on its own, so you can take the exact string into your code without retyping it, which is the whole reason developers open this page.
Is there a full table of every key?
Yes, at /data/key-codes, covering letters, digits, punctuation, modifiers, function keys and the numpad, with a note on every row where the value is not the same across browsers. It is also available as JSON and CSV under CC BY 4.0.
Guides for this test
The test shows you what is happening. These explain what to do about it.
More hardware tests
The closest tests to this one are the rest of the input devices group. Working through a whole machine instead? The full check runs everything in order and ends in one report.
Everything else in the suite: