Development

Keyboard Event Monitor

Press any key to see detailed event information and visual feedback.

Platform:

Every key you press is reported below. Turn on Capture keys to also stop the browser acting on Tab, Space and function keys.

Current Key Event

Press any key

to start monitoring keyboard events

Event data will appear here

Press any key to start

Event History (Last 4 Events)

No events yet. Press any key to start.

Usage Tips

• Press any key to see detailed event information in real-time

• The visual keyboard highlights currently pressed keys

• Try modifier keys (Ctrl, Shift, Alt, Cmd/Win) to see combined events

• Toggle between PC and Mac layout to see platform-specific differences

• Some function keys (F1, F3, F5, F11, F12) have their default behavior prevented

Every property a keydown or keyup event actually carries

Pressing a key fires a real KeyboardEvent, and this tool surfaces its properties directly rather than summarizing them: key (the character or name the key represents, respecting Shift and layout — "a" vs "A"), code (the physical key's position on the keyboard, layout-independent — always the same code regardless of what character the key currently types), which and keyCode (older numeric codes, still populated by the browser but marked deprecated in the current spec), location (which physical key of several identical ones was pressed), repeat (true while a key is held down and auto-repeating), and the four modifier booleans — ctrlKey, shiftKey, altKey, metaKey. The full raw object, including timeStamp and event type, is shown as formatted JSON alongside the summarized view.

key vs. code: the distinction that trips people up

key and code answer different questions, and they are the pair developers confuse most often. code identifies the physical key — pressing the key labeled Z on a QWERTY keyboard always reports code: "KeyZ", even on a layout where that same physical key normally types a different letter. key identifies what the key means right now, including the effect of Shift and the current layout — the same physical press reports key: "z" or key: "Z" depending on Shift, and can report an entirely different character on a different layout. A game's WASD movement should read code, so it stays in the same physical position across layouts; a text shortcut like Ctrl+S should read key, so it matches what the user is actually typing.

Location: telling left from right, and either from Numpad

The location property, exposed here through a named lookup, distinguishes between otherwise-identical keys: 0 is Standard (most keys — only one physical instance exists), 1 is Left and 2 is Right (Shift, Control, Alt, and Meta each exist twice, and location tells you which side was pressed), and 3 is Numpad (a numeric-keypad key that duplicates a main-keyboard key, like Numpad 5 versus the top-row 5). Building a shortcut that should only fire from the left Ctrl, or a numpad-only input, needs this property — key and code alone cannot distinguish them.

Capture mode: observing without losing keyboard access

Capture keys, off by default, calls preventDefault on a specific set of keys — F1, F3, F5 through F8, F11, F12, Space, Tab, and any key combination held with Alt — but only while it is switched on, and Escape always releases it immediately regardless of what else is happening. That narrow, opt-in scope exists because an earlier version of this tool suppressed those keys unconditionally, which meant Tab could not move focus anywhere — a keyboard-only visitor had no way to reach the rest of the page. With capture off, every key you press is still reported in full; only the browser's own default action for that key changes.

What the visual keyboard and event history show

The on-screen keyboard highlights each key the instant its physical position is pressed, color-coded by row, and clears the instant it is released — useful for confirming a key's code visually rather than reading it from the JSON dump. Below it, the last four events are kept as a rolling history, each showing its key, code, which value, location, and any modifiers that were held, so you can compare a sequence of presses — useful for checking exactly what a combination like Ctrl+Shift+K actually reports before wiring a shortcut handler to it.

Common use cases

Debugging a keyboard shortcut that isn't firing

Press the exact combination your handler listens for and read the reported key, code, and modifier booleans to see whether your condition actually matches what the browser sends.

Choosing key vs. code for a game's controls

Confirm that WASD-style movement should check event.code (physical position) rather than event.key, which changes with Shift and keyboard layout.

Distinguishing left and right modifier keys

Read the location value to build a shortcut that should only respond to one side — left Ctrl but not right, for example.

Verifying a custom keyboard capture is not a trap

Turn on Capture keys to see exactly which keys get suppressed and confirm Escape still releases control immediately.

Frequently asked questions

What is the difference between event.key and event.code?

code identifies the physical key regardless of Shift or layout — the same physical key always reports the same code. key identifies what that key currently produces, which changes with Shift ("z" vs "Z") and with keyboard layout. Use code for position-based shortcuts like WASD movement, key for meaning-based ones like Ctrl+S.

Why does "which" show a number instead of a key name, and should I use it?

which (and keyCode) are older numeric key codes that predate key and code. The browser still populates them, and this tool displays them for reference, but they are marked deprecated in the current specification — new code should read key and code instead.

What do the four location values mean?

0 (Standard) covers keys with only one physical instance. 1 (Left) and 2 (Right) distinguish Shift, Control, Alt, and Meta, each of which exists on both sides of the keyboard. 3 (Numpad) marks a numeric-keypad key that duplicates a main-keyboard key.

Why does Tab stop moving focus when I turn on Capture keys?

Capture mode intentionally suppresses the browser's default action for a specific set of keys — including Tab, Space, and several function keys — so you can see what they would have done. Escape is deliberately excluded from suppression and always turns capture off immediately, so keyboard-only navigation is never permanently trapped.

Are Alt key combinations suppressed even if the key itself isn't in the suppressed list?

Yes, while Capture keys is on — any key pressed together with Alt is suppressed, in addition to the fixed list of function keys, Space, and Tab. This only applies during capture; with it off, no key's default action is touched.

Why does my keyboard shortcut work on one layout but not another?

It is very likely reading event.key, which reflects what the key produces on the current layout, instead of event.code, which reflects the physical key position and stays constant across layouts. Compare both values here for the exact key you are targeting.

How many past key events does the tool keep?

The last four, shown as a rolling history with each event's key, code, which value, location, and modifiers — enough to review a short sequence like a two- or three-key combination without needing to press it repeatedly.

Does this tool behave the same in local development as it does live?

Check it against a production build specifically. This route has a known dev-server-only rendering issue in project history, so behavior seen during local development is not a reliable check for this page — always verify against a built, served version.

You might also like