Keyboard Event Debugger

event.key returns the logical character value of the key pressed — it respects the keyboard layout and modifier state. For example, pressing the Q key on a QWERTY layout returns "q", while on an AZERTY layout it returns "a". With Shift held, it returns "Q" or "A" respectively.

event.code returns the physical key location on the keyboard, independent of layout. The Q key always returns "KeyQ" regardless of keyboard layout. This makes code ideal for game controls (WASD), keyboard shortcuts, and layout-agnostic key handling.

Use event.code for physical key identification (games, shortcuts); use event.key for character input (text fields, editors).

event.keyCode (and event.which) are deprecated because they return numeric codes that are inconsistent across browsers and keyboard layouts. They don't distinguish between upper/lowercase and fail to represent many modern Unicode characters.

Replacements:

• Use event.key for the character value (e.g., "a", "Enter", "ArrowUp").
• Use event.code for the physical key (e.g., "KeyA", "Enter", "ArrowUp").

Both key and code are supported in all modern browsers and provide much clearer, layout-aware key identification.

The event.location property tells you which physical key was pressed when multiple identical keys exist on a keyboard:

This is especially useful for differentiating left/right modifier keys or numpad vs. main keyboard digits.

• keydown — Fires when a key is pressed down. Fires for all keys (including modifiers, arrows, function keys). The repeat property is true when a key is held down.
• keyup — Fires when a key is released. Useful for detecting when a modifier or held key is released.
• keypress — Deprecated. Fires only for printable character keys. Does not fire for modifiers, arrows, or function keys. Not recommended for new projects.

For most use cases, keydown and keyup are sufficient and reliable across all browsers.

When a user holds down a key, the operating system generates repeated keydown events. The event.repeat property is true for these auto-repeated events and false for the initial press.

This is useful for:

• Ignoring repeated events in games (you only want the first press).
• Implementing smooth scrolling/typing that respects the OS repeat rate.
• Distinguishing between a deliberate single press and an accidental hold.

keyup events never have repeat: true — they only fire once when the key is physically released.

When users type in languages like Chinese, Japanese, or Korean, they use an Input Method Editor (IME) that combines multiple keystrokes into a single character. During composition, event.isComposing is true.

This is critical because during IME composition:

• Multiple keydown events may fire for what ultimately becomes one character.
• You should not process these intermediate keystrokes as final input.
• Check isComposing to skip events that are part of an active composition session.

if (event.isComposing) return; — this simple guard prevents double-processing of IME input in search boxes, form fields, and editors.

Use the modifier boolean properties on the event object:

document.addEventListener('keydown', (event) => {
    if (event.ctrlKey && event.key === 'c') {
        console.log('Ctrl+C pressed!');
        // Handle copy shortcut
    }
    if (event.metaKey && event.key === 's') {
        console.log('Cmd+S (Mac) pressed!');
        event.preventDefault(); // Prevent browser save dialog
    }
});

The modifier properties (ctrlKey, shiftKey, altKey, metaKey) reflect the real-time state of modifier keys during the event.

Some keys are intercepted by the browser or operating system before JavaScript can process them:

• System-level shortcuts: Alt+Tab (Windows), Cmd+Tab (Mac), Ctrl+W (close tab) — these are handled by the OS/browser.
• Browser chrome keys: F5 (refresh), F11 (fullscreen), F12 (dev tools) — can sometimes be intercepted with preventDefault().
• Print Screen: PrtSc is often handled entirely by the OS and may not fire a JS event.
• Fn keys: Laptop function keys (brightness, volume) are usually handled at the hardware/OS level.

To maximize key capture, ensure the capture zone is focused and enable "Prevent browser defaults" in this tool. However, some OS-level combinations remain uncapturable for security reasons.

The charCode property is only populated during keypress events (which are now deprecated). In keydown and keyup events, charCode is always 0.

This is because keydown fires before the character value is determined (it represents the physical key press), while keypress fires when a character is actually produced.

For modern development, use event.key instead — it provides the character value reliably across all event types.

Mobile virtual keyboards have notable differences from physical keyboards:

• keyCode/which: Often return 0 or 229 (IME processing) for many keys on Android/iOS.
• key property: More reliable on mobile — use this for character detection.
• code property: May return empty strings or generic codes, as there's no physical key layout.
• Modifier keys: Virtual keyboards rarely expose Shift/Ctrl/Alt states as physical modifiers.
• keypress: Particularly unreliable on mobile — avoid entirely.

For cross-platform compatibility, always test keyboard handling on both desktop and mobile devices, and prefer event.key for character input scenarios.