Keyboard Key Code Tester

Why one keypress produces several different "codes"

When you press a key, the browser fires a keydown event carrying not one identifier but several, each answering a different question. Confusing them is the source of countless keyboard-handling bugs. This tool captures a real keydown event and lays every property side by side so you can see exactly what your code will receive. The three you will use most are key, code, and the legacy keyCode, and they mean genuinely different things.

key vs code: the distinction that matters most

This is the heart of modern keyboard handling. key reflects the meaning — it changes with Shift, Caps Lock, and the user's keyboard layout. Press the physical "A" key on a French AZERTY keyboard and key is q, because that is the character that key produces there. code reflects the physical position — that same key always reports KeyA no matter the layout or modifiers, because KeyA names the slot, not the letter. The rule: use key when you care what the user typed (a search box, a text shortcut), and use code when you care which physical key was hit (game movement with WASD, where you want the keys where W/A/S/D physically sit regardless of layout).

A worked example

Click the capture box and press Shift + 1 on a US keyboard. The tool shows: key = ! (the character that combination produces), code = Digit1 (the physical key, unchanged by Shift), keyCode = 49, location = Standard, the Shift modifier pill lit up, and Unicode = U+0021 — the code point of the exclamation mark. Now press 1 on the number pad instead: key = 1, but code = Numpad1 and location = Numpad, distinguishing it from the top-row 1. This is how the tool exposes the difference that a single number could never capture.

The extra fields explained

• Unicode. For single-character keys, the tool computes the code point with codePointAt and shows it as U+XXXX — handy when you need the exact character a key emits.
• Modifiers. Four pills (Ctrl, Shift, Alt, Meta/Cmd) light up to show which were held during the press, read from the event's ctrlKey, shiftKey, altKey, and metaKey booleans.
• type. A friendly category the tool derives — Modifier, Function, Navigation, Whitespace, Character, or Special — so you can quickly tell what kind of key you are dealing with.
• History. The last 20 presses are logged in a table with every field, so you can compare sequences without re-pressing.

Why keyCode is deprecated

You will still see keyCode and its twin which in old code, and the tool reports them for that reason, but both are deprecated. They were never reliable across layouts and browsers, and they cannot distinguish a left Control from a right Control or a top-row digit from a numpad digit. Modern code should use key and code; treat the numeric values here as informational, not as something to build new logic on.

Practical uses and common mistakes

• Building keyboard shortcuts. Verify exactly which property to match. A common bug is matching key === 's' for a save shortcut and missing it when Shift is held (the key becomes S); matching code === 'KeyS' avoids that.
• Game controls. Use code so WASD stays in the same physical spot for players on non-QWERTY layouts.
• Don't hardcode keyCode numbers. The single biggest mistake — those numbers vary and are deprecated. Match on key or code strings instead.
• Remember focus. The capture area must have focus to receive events; click it first. This mirrors how real keyboard listeners only fire on a focused or window-level target.

Everything is read directly from the browser's keyboard event on your device — nothing you type is recorded or transmitted.