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

`event.key` represents the character value of the key (e.g., 'a', 'Enter'), while `event.code` represents the physical key on the keyboard (e.g., 'KeyA', 'Enter'). `event.key` is for character input, `event.code` for physical key detection.

Is `event.keyCode` still used?

`event.keyCode` is deprecated and should be avoided in new web development. Modern web standards recommend using `event.key` for character-based input and `event.code` for physical key identification due to better consistency.

What are modifier keys in keyboard events?

Modifier keys are special keys like Shift, Ctrl (Control), Alt (Option), and Meta (Command/Windows key). `KeyboardEvent` objects have boolean properties (e.g., `event.shiftKey`) to indicate if these keys were held down during an event.

Why do some keys show different `event.key` values depending on Shift?

`event.key` reflects the character produced by the key, considering modifier keys. For example, pressing 'a' yields `event.key: 'a'`, but pressing 'Shift + a' yields `event.key: 'A'`.

Does this tool work for all keyboard layouts?

Yes, this tool reports the `KeyboardEvent` properties as interpreted by your browser and operating system, so it reflects how different keyboard layouts affect `event.key` values, while `event.code` generally remains consistent for physical keys.

Can I test function keys or multimedia keys?

Yes, the Keycode Info tool captures events for most standard and extended keys, including function keys (F1-F12), arrow keys, multimedia keys, and numpad keys, displaying their respective `event.key` and `event.code` values.

JavaScript KeyCode Finder

JavaScript KeyCode Finder Overview

Find the event.key and event.code for any key press.

A Keycode Info tool is an online utility that displays detailed information about keyboard events as they occur in a web browser. When a user presses a key, the browser generates a `KeyboardEvent` object containing various properties. This tool captures these events and presents properties such as `event.key`, `event.code`, `event.keyCode` (deprecated), `event.which` (deprecated), and modifier keys (e.g., `shiftKey`, `ctrlKey`, `altKey`, `metaKey`). It provides immediate feedback on what the browser registers for each key press, release, or hold. Technically, the tool attaches event listeners to the `document` object for `keydown`, `keyup`, and sometimes `keypress` events. When an event fires, the listener captures the `KeyboardEvent` object. It then extracts relevant properties from this object, such as `key` (the character value of the key), `code` (the physical key identifier), and `keyCode` (a numerical value, largely superseded by `key` and `code`). These properties are then displayed in a user-friendly format, often updating in real-time as keys are pressed. The `KeyboardEvent` interface is part of the DOM Level 3 Events specification. Web developers, UI/UX designers, and accessibility specialists use Keycode Info tools to debug keyboard interactions in web applications. It helps verify that specific keys are correctly detected, especially for shortcuts, game controls, or custom input fields. It is also useful for understanding browser differences in event reporting or for developing cross-browser compatible keyboard event handling. By providing a clear view of keyboard event data, it assists in building responsive and accessible user interfaces.

How to Use JavaScript KeyCode Finder

Step 1: Navigate to the Keycode Info tool in your browser.
Step 2: Click anywhere within the designated input area or the page body.
Step 3: Press any key on your keyboard (e.g., letters, numbers, function keys, modifiers).
Step 4: Observe the displayed properties like `event.key`, `event.code`, and `keyCode` update in real-time.
Step 5: Release the key and note the `keyup` event details.

Frequently Asked Questions

What is the difference between `event.key` and `event.code`?: `event.key` represents the character value of the key (e.g., 'a', 'Enter'), while `event.code` represents the physical key on the keyboard (e.g., 'KeyA', 'Enter'). `event.key` is for character input, `event.code` for physical key detection.
Is `event.keyCode` still used?: `event.keyCode` is deprecated and should be avoided in new web development. Modern web standards recommend using `event.key` for character-based input and `event.code` for physical key identification due to better consistency.
What are modifier keys in keyboard events?: Modifier keys are special keys like Shift, Ctrl (Control), Alt (Option), and Meta (Command/Windows key). `KeyboardEvent` objects have boolean properties (e.g., `event.shiftKey`) to indicate if these keys were held down during an event.
Why do some keys show different `event.key` values depending on Shift?: `event.key` reflects the character produced by the key, considering modifier keys. For example, pressing 'a' yields `event.key: 'a'`, but pressing 'Shift + a' yields `event.key: 'A'`.
Does this tool work for all keyboard layouts?: Yes, this tool reports the `KeyboardEvent` properties as interpreted by your browser and operating system, so it reflects how different keyboard layouts affect `event.key` values, while `event.code` generally remains consistent for physical keys.
Can I test function keys or multimedia keys?: Yes, the Keycode Info tool captures events for most standard and extended keys, including function keys (F1-F12), arrow keys, multimedia keys, and numpad keys, displaying their respective `event.key` and `event.code` values.

Related Dev Tools

IP Geolocation - Find location data for any IP address
Domain Availability - Check if a domain name is available for registration
React Component Gen - Generate boilerplate for React components
.htaccess File Generator - Create Apache redirects and security rules
robots.txt Tester - Test if a specific URL is allowed by robots.txt
JSON to TOON Converter - Optimize JSON for LLMs (30-60% Token Reduction)
Regex Tester - Test and debug regular expressions
UUID Generator - Generate unique identifiers (UUIDs/GUIDs) instantly