What this tool does
It listens for keydown and keyup in the capture box and shows each property of the KeyboardEvent. key is the value the key produces with the current layout and modifiers, such as "a", "A", "é" or a named key like "Enter" or "ArrowLeft". code names the physical key after its position on a US keyboard, such as "KeyA" or "Digit1", whatever the layout types there. keyCode and which are the legacy numbers: the UI Events specification keeps them only for old content, and their values for punctuation and some special keys differ between browsers. location is 0 for most keys, 1 or 2 for the left or right Shift, Control, Alt and Meta, and 3 for the numeric keypad. repeat is true while a held key auto-repeats, isComposing is true inside an IME composition, and getModifierState() reports Caps Lock, Num Lock and AltGr. While the box has focus, the site's own shortcuts are paused and, with Block default actions on, preventDefault() stops Tab, Space, arrows, F5 and browser shortcuts where the browser allows it. Press Esc twice to leave the box. The code and key values follow the W3C UI Events code and key specifications.
Example input and output
Press A, then Shift+A, on a US layoutkeydown key "a" code "KeyA" keyCode 65 location 0
keydown key "Shift" code "ShiftLeft" keyCode 16 location 1
keydown key "A" code "KeyA" keyCode 65 shiftKey trueShift changes key but not code or keyCode. For letters, keyCode is the code of the uppercase letter, 65 to 90.
Press the key right of Tab (Q on a US keyboard) with an AZERTY layoutkeydown key "a" code "KeyQ" keyCode 65 location 0key follows the layout; code still names the US position. WASD controls written with code keep working on AZERTY, where those keys are labelled Z, Q, S and D.
Press 7 on the numeric keypad, turn Num Lock off, and press it againkeydown key "7" code "Numpad7" keyCode 103 location 3
keydown key "Home" code "Numpad7" keyCode 36 location 3code and location stay the same while key and keyCode follow Num Lock. Mac keyboards have no Num Lock; the key in that place is Clear.
Common errors and fixes
- Checking event.keyCode or event.which in new code
- Both are deprecated, and their values depend on the browser and layout: ; is 186 in Chrome and 59 in Firefox. Compare event.key for characters and named keys, or event.code for physical positions. keyCode 13 is "Enter", 27 is "Escape" and 32 is " ".
- WASD game controls break on AZERTY
- With event.key, the W position types z on AZERTY, so the controls stop matching. Check event.code ("KeyW", "KeyA", "KeyS", "KeyD"), which names the position. To show the player's own labels, Chromium browsers offer navigator.keyboard.getLayoutMap().
- Option shortcuts never match on a Mac
- Option types special characters, so Option+S has key "ß" and Option+E has key "Dead". Match Alt and Option shortcuts with event.code and event.altKey instead of event.key.
- A Ctrl shortcut does nothing for Mac users
- Mac users press ⌘, which sets metaKey, not ctrlKey. Accept event.metaKey || event.ctrlKey for shortcuts such as save and undo, and show ⌘ or Ctrl in your labels to match the platform.
- Listening for keypress
- keypress is deprecated and fires only for keys that produce a character, plus Enter, so it never sees Escape, arrows or modifiers. Use keydown for keys and beforeinput or input for text.
- Enter submits while Japanese or Chinese text is still being composed
- Pressing Enter to confirm IME text also sends a keydown for Enter. Ignore keydown when event.isComposing is true or event.keyCode is 229, and handle Enter only after compositionend.
Common use cases
- Finding the event.key or event.code value for a keyboard shortcut
- Setting up WASD or arrow-key controls for a browser game
- Replacing keyCode checks in older code with key or code
- Debugging shortcuts on AZERTY, QWERTZ and Dvorak layouts
- Checking what a phone keyboard or IME sends before you handle Enter
- Telling left from right modifiers, and numpad keys from the main ones
Privacy and security notes
- Key presses and the text you type are read by JavaScript in this tab and shown on the page. Nothing is sent to DevPrix or stored, and reloading the page clears the log.
- While the capture box has focus, the site's own shortcuts are paused. Shortcuts the browser or operating system keeps, such as closing a tab or switching apps, never reach the page, so the tool can't see or block them.
- Share copies the link to this page only; no key presses go into it.
Frequently asked questions
What's the difference between event.key and event.code?
key is what the key produces with the current layout and modifiers: "a", "A", "é", or a name such as "Enter". code is the physical key, named after its position on a US keyboard, so the key right of Tab is always "KeyQ", even when an AZERTY layout types a. Use key for text and for shortcuts named after a letter, and code for games and other position-based controls.
Is keyCode deprecated, and what replaces it?
Yes. The UI Events specification documents keyCode, which and charCode only so old content keeps working, and MDN marks them deprecated. Browsers still send them, but the numbers vary: Chrome sends 186 for the ; key and Firefox sends 59. Use event.key or event.code. The common ones map like this: 13 is "Enter", 27 is "Escape", 32 is " ", and 37 to 40 are "ArrowLeft", "ArrowUp", "ArrowRight" and "ArrowDown".
Why does my phone send keyCode 229 and key "Unidentified"?
Many mobile keyboards, especially on Android, compose text before they commit it, so keydown can't say which character is coming. The UI Events specification tells browsers to report keyCode 229 while an input method is processing a key. Read the text from the beforeinput or input event (its inputType and data) instead, and skip keydown when event.isComposing is true or keyCode is 229.
How do I tell left Shift from right Shift?
Check event.location: 1 means left and 2 means right. event.code says the same with "ShiftLeft" and "ShiftRight". Numpad keys have location 3, so the numpad Enter key has code "NumpadEnter" and location 3, while key is "Enter" for both Enter keys.
Why can't the tool capture ⌘W, Ctrl+Tab or Alt+Tab?
The browser or the operating system handles some shortcuts before the page sees them, such as closing and switching tabs or switching apps. Others, such as ⌘S or F5, do reach the page, and the capture box blocks them with preventDefault(). On a Mac, a key released while ⌘ is held often sends no keyup at all.
How do I leave the capture box with the keyboard?
Press Esc twice in a row. Focus moves to the Capture keys button, and Tab carries on from there. You can also untick Block default actions, and Tab then leaves the box as usual.
Guides
- event.key vs event.code vs keyCode in JavaScriptWhat event.key, event.code and the deprecated keyCode report, which to use for text, shortcuts and games, and how layouts, IMEs and Mac keys change them.