Keyboard Event Viewer

event.key returns the character or name of the key (e.g., "a", "Enter", "ArrowUp"). It reflects what the user sees printed on the key cap. This is the modern, recommended property.

event.code returns the physical key identifier (e.g., "KeyA", "ArrowUp", "ShiftLeft"). It's tied to the physical position on the keyboard, regardless of layout. Use this for game controls or when you need location-specific detection.

event.keyCode is a numeric code (e.g., 65 for A, 13 for Enter). It is deprecated and should be avoided in new code. It was inconsistent across browsers and keyboard layouts.

keyCode was deprecated because it was browser-inconsistent, didn't handle international keyboard layouts well, and couldn't distinguish between physical keys. For example, pressing the semicolon key (;) on a US keyboard produced keyCode 186, but the same physical key on a German keyboard produced a different code. The newer event.code and event.key properties solve these issues.

• keydown – Fires when a key is pressed down. Fires for all keys (including modifiers). Best for most use cases. Supports event.repeat.
• keyup – Fires when a key is released. Useful for tracking key release or implementing press-and-hold interactions.
• keypress – Deprecated. Only fires for character-producing keys. Does NOT fire for arrow keys, modifiers, etc. In keypress, event.code is typically empty.

event.location indicates where on the keyboard the key is physically located:

• 0 – Standard key (most keys)
• 1 – Left-side modifier (e.g., left Shift, left Ctrl)
• 2 – Right-side modifier (e.g., right Shift, right Ctrl)
• 3 – Numeric keypad

This is especially useful when you need to distinguish between left and right Shift/Ctrl/Alt keys.

Keyboard events on mobile devices behave differently due to virtual keyboards. Many mobile browsers don't fire keypress events at all, and event.code may be empty or return generic values. For reliable cross-device input handling, consider using input or change events on form fields, or use event.key with a fallback for desktop-specific features.

Use the modifier properties on the event object: event.ctrlKey, event.metaKey, event.altKey, event.shiftKey. For example, to detect Ctrl+C: if (event.ctrlKey && event.key === 'c') { ... }. On Mac, users expect Cmd+C, so check event.metaKey as well for cross-platform support.

event.isComposing returns true when the user is in the middle of composing text using an Input Method Editor (IME), such as typing Chinese, Japanese, or Korean characters. During composition, you typically want to ignore keyboard events until the composition is complete (when isComposing becomes false), to avoid handling incomplete input.