NC Logo UseToolSuite

Keyboard Event Viewer

Free online keyboard event inspector that displays event.key, event.code, keyCode, modifiers, and location in real time. Press any key and get a ready-to-use JavaScript event listener code snippet instantly.

Click here & press a key

event.key

event.code

event.keyCode

event.which

event.location

event.type

repeat

Modifiers

document.addEventListener('keydown', (e) => );

Waiting for key events...

What is Keyboard Event Viewer?

Keyboard Event Viewer is a free online tool that displays all JavaScript keyboard event properties in real time as you press keys. It shows event.key, event.code, event.keyCode, event.which, modifier states, key location, and repeat status — everything you need when building keyboard shortcuts, accessibility features, or game controls. It also generates a ready-to-use JavaScript event listener code snippet for the key you pressed and maintains a scrollable event log. All processing happens locally in your browser.

When to use it?

Use the Keyboard Event Viewer when you need to look up the exact event.key or event.code value for a specific key, debug keyboard shortcuts across different keyboard layouts, check whether the deprecated keyCode property matches your expectations, or understand the difference between left and right modifier keys using event.location. It is especially useful when building keyboard-driven interfaces where you need to know the precise event properties before writing your handler code.

Common use cases

Developers use the Keyboard Event Viewer to debug hotkey implementations in web apps, verify that arrow keys and function keys produce the expected event codes, test modifier key combinations (Ctrl+Shift+S, Cmd+K) for custom shortcuts, check keyboard behavior in accessibility testing, understand key repeat behavior for game-like interactions, and generate boilerplate JavaScript code for event listeners. It is also a valuable reference tool for understanding the differences between the modern event.key/event.code API and the deprecated event.keyCode/event.which properties.

Key Concepts

Essential terms and definitions related to Keyboard Event Viewer.

KeyboardEvent

A DOM event fired when the user interacts with the keyboard. Three event types exist: keydown (key pressed), keyup (key released), and the deprecated keypress (character produced). KeyboardEvent provides properties like key, code, keyCode, location, and modifier states (ctrlKey, shiftKey, altKey, metaKey) that describe the key interaction.

event.key

A string representing the key value of the key pressed. For printable characters it returns the character itself ("a", "A", "1", "/"). For non-printable keys it returns a descriptive name ("Enter", "Escape", "ArrowDown", "Shift"). The value is affected by the active keyboard layout and modifier key state.

event.code

A string representing the physical key on the keyboard, independent of keyboard layout. It uses a standard naming convention: letter keys are "KeyA" through "KeyZ", digit keys are "Digit0" through "Digit9", and special keys have descriptive names like "ShiftLeft", "ArrowUp", "Space". The same physical key always produces the same event.code regardless of language or layout.

Key Repeat

When a key is held down, the operating system generates repeated keydown events after an initial delay (repeat delay) at a configurable rate (repeat rate). The event.repeat property is false for the first keydown and true for all subsequent auto-repeated events. This is useful for distinguishing initial key presses from held keys in games and keyboard-driven interfaces.

Frequently Asked Questions

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

event.key returns the character or key name produced by the key press, affected by the current keyboard layout and modifier keys (e.g., "a" or "A"). event.code returns the physical key identifier on the keyboard regardless of layout (e.g., "KeyA" whether your layout is QWERTY, AZERTY, or Dvorak). Use event.key for text input handling and event.code for keyboard shortcuts that should work on any layout.

Is event.keyCode deprecated? What should I use instead?

Yes, event.keyCode and event.which are deprecated in the DOM specification and should not be used in new code. Use event.key for the logical key value (character or key name) and event.code for the physical key position. However, keyCode is still widely supported in browsers for backward compatibility, and this tool shows it for reference when maintaining legacy code.

Why do some keys not trigger keydown events?

Certain keys may be intercepted by the operating system or browser before they reach your JavaScript event handler. Common examples include PrintScreen (captured by the OS), F11 (browser fullscreen toggle), and Ctrl+W (close tab). Some accessibility tools and browser extensions also intercept keys. The keys that reach your handler depend on the user's OS, browser, and installed extensions.

How does event.location work for modifier keys?

event.location indicates the physical position of the key: 0 (Standard — general area), 1 (Left — left Shift, left Ctrl), 2 (Right — right Shift, right Alt), 3 (Numpad — numpad keys). This is essential for distinguishing between left and right modifier keys in applications like games or accessibility tools where the physical key position matters.

Can I detect key combinations like Ctrl+Shift+S?

Yes. Check the modifier properties (e.ctrlKey, e.shiftKey, e.altKey, e.metaKey) together with e.key in your keydown handler. This tool automatically generates the correct JavaScript condition for any key combination you press, including multi-modifier combinations.

Troubleshooting & Technical Tips

Common errors developers encounter and how to resolve them.

Key event not firing inside an input or textarea element

When an input, textarea, or contenteditable element has focus, key events fire on that element first. If the element handles the event (e.g., typing text), it may not bubble to your document-level listener as expected. Use event capturing (addEventListener with { capture: true }) or attach the listener directly to the target element. For global shortcuts, check e.target.tagName to decide whether to handle or ignore the event.

event.key returns "Unidentified" for some keys

The "Unidentified" value is returned when the browser cannot map the physical key to a known key value. This commonly happens with non-standard keys on specialized keyboards (gaming, multimedia), some IME composition states on non-Latin keyboards, or browser bugs on certain platforms. In these cases, fall back to event.code (physical key position) or event.keyCode (legacy numeric value) for identification.

Keyboard shortcuts conflict with browser defaults (Ctrl+S, Ctrl+P)

Call e.preventDefault() in your keydown handler to override the browser default. However, some shortcuts cannot be overridden in all browsers (Ctrl+N, Ctrl+T, Ctrl+W). For maximum compatibility, choose shortcuts that do not conflict with common browser actions, or use modifier combinations like Ctrl+Shift+key that are less likely to conflict.

Related Tools