Keycode & Keyboard Event Inspector
Inspect JavaScript KeyboardEvent attributes in real-time including event.key, event.code, which, location, and generate ready-to-use event handler snippets.
Live Key Listener
Code Generation & Payloads
// Modern W3C Standard Keyboard Handler
window.addEventListener('keydown', (event) => {
if (event.key === "Enter") {
console.log('Key captured:', event.key);
// Code identifier: "Enter"
// event.preventDefault();
}
});Understanding JavaScript Keyboard Events: event.key vs. event.code
In modern web development, capturing keyboard input accurately is critical for building accessibility-compliant shortcuts, interactive canvas games, and rich text editors. Prior to the modern DOM Level 3 Events specification, developers relied heavily on numeric properties such as event.keyCode and event.which. However, these legacy values produced severe bugs across international keyboards and different operating systems.
Modern Standard: event.key
event.key returns the semantic value of the character generated. It accounts for whether the Shift key is held down (producing "A" instead of "a") and adapts to localized keyboard layouts (e.g., QWERTY, AZERTY, or Cyrillic).
Physical Hardware: event.code
event.code identifies the physical hardware key on the keyboard, completely unaffected by language layout or modifier keys. Pressing the physical 'W' key always emits "KeyW", making it the ideal choice for WASD game controls.
KeyboardEvent Property Comparison & Deprecation Matrix
The W3C DOM Level 3 Event standard explicitly discourages legacy numeric codes in favor of string-based identifiers. Review the feature comparison below:
| Property | Type | Specification Status | Primary Use Case |
|---|---|---|---|
| event.key | string | Standard (Recommended) | Form inputs, keyboard shortcuts, UI navigation |
| event.code | string | Standard (Recommended) | Game movement (WASD), physical key bindings |
| event.location | number (0-3) | Standard | Distinguishing Left vs. Right Shift / Numpad |
| event.keyCode | number | Deprecated (Legacy) | Legacy browser maintenance (IE11 and older) |
| event.which | number | Deprecated (Legacy) | Older jQuery compatibility layers |
Common JavaScript Keycode Reference Table
Quick reference values for the most frequently implemented keyboard keys across standard web applications:
Frequently Asked Questions (FAQ)
Why is event.keyCode deprecated in modern JavaScript?
The W3C deprecated event.keyCode and event.which because they are inconsistent across international keyboard layouts, operating systems, and browsers. Modern standards recommend event.key for semantic character values and event.code for physical key positions.
What is the difference between event.key and event.code?
event.key returns the actual semantic character generated taking Shift, AltGr, and active keyboard language layouts into account (e.g., "a", "A", "Å"). In contrast, event.code represents the physical hardware key on the keyboard independent of layout (e.g., "KeyA", "Digit1").
How does KeyboardEvent.location identify key positions?
KeyboardEvent.location indicates whether the pressed key was on the standard section (0), left side (1, e.g., Left Shift), right side (2, e.g., Right Shift), or numeric keypad (3, e.g., Numpad 5).
How can I prevent default browser keyboard behaviors like scrolling?
Call event.preventDefault() inside a keydown event listener. This prevents native browser behaviors like Space or Arrow keys scrolling the viewport, Tab moving focus, or Backspace navigating back in older browsers.
Does this tool track modifier keys like Shift, Control, Alt, and Meta?
Yes. The inspector displays boolean status flags for event.shiftKey, event.ctrlKey, event.altKey, and event.metaKey (Command on macOS or Windows key on PC), as well as repeat and isComposing flags for IME inputs.
Related & Complementary Utilities
Explore more privacy-first client-side web tools.
JSON to CSV & CSV to JSON Converter
Convert JSON to CSV and CSV to JSON instantly with custom delimiters, nested object flattening, real-time reactive conversion, dynamic size metrics tracking, and drag-and-drop file ingestion — 100% client-side.
HTML & CSS Minifier & Unminifier
Minify, unminify, compress, and beautify HTML markup and CSS stylesheets instantly with pure TypeScript tokenization engines — 100% client-side, zero external dependencies.
Screen Resolution & Aspect Ratio Calculator
Calculate display aspect ratios, custom dimension scaling, PPI density, and responsive CSS snippets.