DevToolbox

Event KeyCodes Tester

Press any key to see its event.key, event.code, keyCode, and which values in real time.

About This Tool

The Event KeyCodes Tester is a real-time keyboard event inspector built for JavaScript developers. Unlike static lookup tables, this tool captures live KeyboardEvent objects as you press keys and displays every property that matters for keyboard event handling: event.key, event.code, event.keyCode, event.which, event.location, modifier states, and whether the key is being held down (event.repeat).

Keyboard event handling is one of the trickiest parts of front-end development. The modern event.key property returns a human-readable value like "Enter" or "ArrowDown", while event.code identifies the physical key on the keyboard regardless of layout or active modifiers. For example, pressing the "Z" key on a QWERTY keyboard returns "KeyZ" for event.code, even on an AZERTY layout where the same physical key types "W". Understanding this distinction is critical for building accessible and internationalized keyboard shortcuts.

The legacy properties keyCode and which are deprecated by the W3C UI Events specification, but they remain widely used in existing codebases and are still supported by all major browsers. This tool shows both modern and legacy values side by side, making it easy to migrate old code or support both approaches. Each deprecated property is clearly labeled so you know which values to avoid in new projects.

The event history log keeps track of your last 20 key presses, showing the key, code, keyCode, event type, active modifiers, and precise timestamp for each entry. This is particularly useful when debugging key sequences, testing modifier combinations like Ctrl+Shift+K, or verifying that keydown and keyup events fire in the expected order. You can copy any event as a JSON object for use in tests, documentation, or bug reports. All processing happens entirely in your browser — no keystrokes are recorded or sent to any server.

How to Use

  1. Click the focus area at the top of the tool. It auto-focuses on page load, but you can click it any time to recapture focus.
  2. Press any key on your keyboard. The tool instantly displays all event properties in prominent cards: event.key, event.code, keyCode, which, location, and repeat.
  3. Check the modifier badges (Shift, Ctrl, Alt, Meta) to see which modifiers are active. Active modifiers are highlighted in green.
  4. Review the event type indicators (keydown, keypress, keyup) to see which events fired for your key press.
  5. Hover over any property card and click the copy icon to copy that value to your clipboard. Use the Copy as JSON button to copy the entire event as a JSON object.
  6. Scroll down to the event history table to review your last 20 key presses with timestamps and modifier details. Click Clear History to reset.

FAQ

How is this different from the KeyCode Reference tool?

The KeyCode Reference tool provides a static, searchable lookup table of all standard keyboard codes. This Event KeyCodes Tester is a live event detector that captures real KeyboardEvent objects as you press keys, showing every property in real time including modifier states, repeat detection, and event type indicators. Use the Reference for browsing all codes; use this Tester for live debugging and inspecting actual events.

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

event.key returns the logical value of the key, taking keyboard layout and modifiers into account (e.g., pressing Shift+1 gives "!"). event.code identifies the physical key regardless of layout (e.g., "Digit1" is always the same physical key). Use event.key for text input and event.code for layout-independent shortcuts like gaming controls.

Are event.keyCode and event.which still safe to use?

Both event.keyCode and event.which are deprecated in the W3C UI Events specification, but all major browsers still support them for backward compatibility. For new code, prefer event.key or event.code. If you maintain legacy code that uses keyCode, this tool helps you verify the values without rewriting your event handlers.

What does event.location tell me?

event.location indicates the physical position of a key: 0 (Standard) for general keys, 1 (Left) for left-side modifiers like Left Shift, 2 (Right) for right-side modifiers like Right Ctrl, and 3 (Numpad) for numeric keypad keys. This is essential when you need to distinguish between, say, the left and right Alt keys.

Why do some keys not appear in the tool?

Certain key combinations are intercepted by the operating system or browser before they reach the web page. For example, Cmd+Q on macOS quits the browser, Ctrl+W closes the current tab, and Print Screen may be captured by the OS. These events cannot be detected by any web application.

What is event.repeat and when does it fire?

event.repeat is true when a key is being held down and the browser fires repeated keydown events. The first keydown has repeat: false, and subsequent ones while the key is held have repeat: true. This is useful for distinguishing a single key press from a held key in games or text editors.

Is my data safe? Are keystrokes recorded?

All processing happens entirely in your browser. No keystrokes are recorded, transmitted, or stored on any server. The event history is kept in local component state and is cleared when you close or refresh the page. You can verify this by checking the Network tab in your browser's DevTools.

Related Tools

JavaScript KeyCode Reference

Press any key to see its event.key, keyCode, code, and which values. Searchable reference table for all keyboard events.

ASCII / Unicode Table

Browse, search, and filter ASCII and Unicode characters with decimal, hex, octal, and binary values.

HTML Entity Encode/Decode

Encode and decode HTML entities, named characters, and Unicode escape sequences.

String Escape/Unescape

Escape and unescape strings for JSON, JavaScript, HTML, URL, SQL, and CSV formats.

Browser Feature Detector

Detect and display your browser's API support status across 50+ web platform features including WebGL, WebGPU, Service Workers, and more.

User-Agent Parser

Parse and analyze any User-Agent string to identify browser, OS, device type, rendering engine, and detect bots/crawlers.