Keyboard Event Inspector (key, code, keyCode)
Press any key to see its JavaScript KeyboardEvent: key, code, the legacy keyCode, which and charCode, location, repeat, isComposing and every modifier, with the physical key lit on a keyboard, a history of events and a ready snippet to detect it.
How to Use
- Click the capture box (or Tab to it) and press any key or combination. The big readout shows key and code; the physical key lights up on the keyboard drawing.
- Read the history table for every keydown, keypress and keyup with keyCode, which, charCode, location, repeat, IME state, modifiers and the milliseconds between events.
- While Keep keys in the box is ticked, Tab, Space, arrows and shortcuts do not move the page. Press Esc twice or click elsewhere to leave the box.
- To test an input method or dead keys, type in the IME field: compositionstart, compositionupdate and compositionend are logged with their data.
- Choose Match by key or Match by code and press Copy snippet for a listener that detects the last key. The presets explain common keys without pressing them.
Detect this key
History, newest first
Worked Example
Shift + / on a US keyboard. keydown reports key "?" (Shift is already applied), code "Slash" (the physical key), keyCode 191 (the Windows virtual-key code VK_OEM_2, the same with or without Shift), location 0 and shiftKey true. A keypress follows with charCode 63, the code point of ?.
The same physical key on two layouts. The key to the right of Tab is code "KeyQ" everywhere. On US QWERTY it gives key "q" and keyCode 81; on French AZERTY it gives key "a" and keyCode 65, because the legacy number follows the letter the layout puts there. code stays the same, which is why a game that reads code keeps its controls in place.
Numpad 5. With Num Lock on: key "5", code "Numpad5", keyCode 101, location 3 — while the top-row 5 is code "Digit5", keyCode 53, location 0. With Num Lock off the same key sends key "Clear" and keyCode 12.
The common mistake: detecting a character by its physical key. if (e.keyCode === 191) or if (e.code === "Slash") to open a help panel on ? works on a US keyboard only. On French AZERTY, ? is Shift and the key in the M position (code "KeyM"), so neither test fires. if (e.key === "?") works on every layout. The reverse holds for position-based controls: test code, not key.
Show Work
KeyboardEvent Reference
From keyCode to key and code
Keyboard events arrived in browsers in the late 1990s with no standard behind them. Netscape exposed a which property and Internet Explorer a keyCode property, both numbers taken from the operating system, Mozilla later added charCode for the character, and every browser since has copied Internet Explorer’s Windows virtual-key numbers as closely as it could. DOM Level 2 Events (2000) left keyboard events out altogether because the vendors could not agree.
The replacement was worked out in DOM Level 3 Events, which became today’s UI Events specification. WebKit first shipped a keyIdentifier property with values such as "U+0041"; the final design split the job in two: key, a string for what the key means (with a fixed list of names such as "ArrowUp" and "Dead"), and code, a string for the physical key. Both were in every major browser by 2017, Safari 10.1 being the last, and keyCode, which, charCode and the keypress event are now kept only so old pages still work.
About This Tool
This inspector listens to the real events your browser fires in the capture box and the IME field and shows every property, including the deprecated ones, so you can see exactly what your code will receive on this machine, browser and keyboard layout. Show Work explains the last event: what key means, why code can disagree with it, where the legacy keyCode comes from and why not to rely on it.
The presets are explanation cards built from the US layout table, clearly labelled, and never fake a key press. Nothing you type is stored or sent anywhere; the history is cleared when you leave the page.
Related tools: Unicode Lab, Unicode Escape / Unescape, and Hardware Lab.
Frequently Asked Questions
What is the difference between event.key and event.code?
key is what the key means with the current layout and modifiers; code names the physical key by its position on a US QWERTY keyboard. On a French AZERTY keyboard the key where US has Q types a, so you get key "a" and code "KeyQ". Use key for text and for shortcuts such as Ctrl+S, and code when position matters, such as WASD movement in a game, which then works on every layout.
Why is keyCode deprecated, and what should I use instead?
keyCode, which and charCode were never standardised: they are Windows virtual-key numbers that vary by browser and layout. Firefox reports 59 for the semicolon key where Chrome reports 186, letters give the same number with or without Shift (A and a are both 65), and dead keys or AltGr have no sensible value. UI Events marks them legacy. Replace keyCode === 13 with key === "Enter", 27 with "Escape", 32 with " " and 38 with "ArrowUp".
Why does event.key === "Space" never match?
Because the key value of the space bar is a single space character, " ". Its code is "Space". Older browsers also used different names: Internet Explorer and the original Edge reported "Spacebar", "Esc" and "Up" instead of " ", "Escape" and "ArrowUp", which is why older code sometimes tests both spellings.
How do IME composition, dead keys, AltGr and the Mac Option key behave?
While an input method (Japanese, Chinese, Korean and others) is composing, keydown arrives with key "Process", keyCode 229 and isComposing true, and the text comes in compositionupdate and compositionend — so check isComposing before acting on Enter. A dead key such as ´ on many European layouts gives key "Dead" and the next key produces the combined letter. On Windows, AltGr is reported as Ctrl and Alt held together, so test getModifierState("AltGraph"). On a Mac, Option changes the character: Option+G gives key "©" with altKey true.
Why do some keys never appear?
Some never reach the page. Fn is handled inside the keyboard, Print Screen usually reaches the browser only as a keyup on Windows, and the operating system may take media keys. Some browser shortcuts, such as Ctrl+W or Ctrl+T, cannot be cancelled. On macOS, while Command is held, other keys send keydown but no keyup, so code that waits for keyup can think a key is stuck.
How do I use the Keyboard Event Inspector (key, code, keyCode)?
Simply type your numbers and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Game controls on any layout
Use code "KeyW", "KeyA", "KeyS" and "KeyD" so movement keys stay in the same place on AZERTY, where those positions type z, q, s and d.
Replacing keyCode in old code
Press each key to translate legacy numbers: 13 is "Enter", 27 is "Escape", 9 is "Tab", 37 to 40 are the arrows.
Keyboard shortcuts
Check what Ctrl+Shift+K or Cmd+K actually report on Windows and macOS before you wire up a command palette.
International users
Ask someone with a German or French keyboard to press the key that gives you trouble and read key, code and the AltGr state from the history.
Accessibility testing
Confirm a widget sees Escape, Space and the arrows, and that Tab is not trapped — Shift+Tab should report key "Tab" with shiftKey true.
Last updated: