About

Precise keyboard input handling is the backbone of robust web applications, data entry interfaces, and browser-based games. Developers often struggle with the discrepancies between physical key positions (Hardware Scan Codes) and the characters they generate (Logical Values). This distinction is exacerbated by different operating systems (Windows vs. macOS) and international keyboard layouts (ANSI vs. ISO vs. JIS).

This tool solves the ambiguity by capturing the three critical layers of a key press event in real-time:

Physical Location (event.code). The hardware key identifier. Immutable regardless of language layout. Critical for game controls (e.g., WASD).
Character Value (event.key). The resulting character, affected by modifier keys like Shift or AltGraph.
Legacy Index (keyCode). The integer value used in older codebases, now deprecated but often required for maintaining legacy systems.

Use the log below to inspect "dead keys", composed characters (IME), and modifier sequences. The comprehensive reference table provides a master list of standard definitions.

Formulas

When detecting input, prioritizing the modern event.code is recommended for layout-independent consistency. The hierarchy of properties is defined as follows:

{

key = Generated Character (e.g., "A", "@")code = Physical Button (e.g., "KeyA", "Digit2")location = Key Region (0=Std, 1=Left, 2=Right, 3=Numpad)

To detect a specific combination, such as Ctrl + Shift + Z, logical checks are required rather than a single code:

isRedo = event.ctrlKey kAND event.shiftKey kAND event.code === "KeyZ"

Reference Data

Category	Physical Code (event.code)	Key Value (event.key)	Legacy (which)	Description
System & UI	Escape	Escape	27	Cancel / Abort
	Enter	Enter	13	Submit / Return
	Space		32	Space Bar
	Tab	Tab	9	Tabulator (Focus Next)
	CapsLock	CapsLock	20	Capital Lock Toggle
Modifiers	ShiftLeft	Shift	16	Left Shift Modifier
	ShiftRight	Shift	16	Right Shift Modifier
	ControlLeft	Control	17	Left Control (Command)
	ControlRight	Control	17	Right Control
	AltLeft	Alt	18	Left Alt (Option)
	MetaLeft	Meta	91	OS Key (Windows/Apple)
Navigation	ArrowUp	ArrowUp	38	Cursor Up
	ArrowDown	ArrowDown	40	Cursor Down
	ArrowLeft	ArrowLeft	37	Cursor Left
	ArrowRight	ArrowRight	39	Cursor Right
	Home	Home	36	Go to Start
	End	End	35	Go to End
Editing	Backspace	Backspace	8	Delete Backward
	Delete	Delete	46	Delete Forward
	Insert	Insert	45	Toggle Insert Mode
Digits (Top)	Digit0	0 / )	48	Digit 0
	Digit1	1 / !	49	Digit 1
	Digit2	2 / @	50	Digit 2
	Digit5	5 / %	53	Digit 5
	Digit9	9 / (	57	Digit 9
Letters	KeyA	a / A	65	Latin A
	KeyZ	z / Z	90	Latin Z
	KeyW	w / W	87	Latin W
	KeyM	m / M	77	Latin M
Symbols	Backquote	` / ~	192	Grave Accent
	Minus	- / _	189	Hyphen
	Equal	= / +	187	Equal Sign
	BracketLeft	[ / {	219	Open Bracket
	BracketRight	] / }	221	Close Bracket
	Backslash	\ / \|	220	Backslash
Numpad	Numpad0	0	96	Num 0 (Insert)
	NumpadMultiply	*	106	Num Asterisk
	NumpadAdd	+	107	Num Plus
	NumpadSubtract	-	109	Num Minus
	NumLock	NumLock	144	Number Lock
Function	F1	F1	112	Help (Usually)
	F5	F5	116	Refresh
	F11	F11	122	Fullscreen
	F12	F12	123	DevTools
	PrintScreen	PrintScreen	44	Screen Capture

Frequently Asked Questions

The "Unidentified" value often appears when the browser cannot map a physical key press to a standard value. This is common with specialized keys on gaming keyboards, media controllers, or when an Input Method Editor (IME) is actively composing a character (e.g., waiting for a second keystroke to create an accented letter).

While they both produce the same numbers visually (e.g., '1'), they send different `event.code` values (`Digit1` vs. `Numpad1`). Game developers often distinguish these to allow players to use the Numpad for different actions than the top row numbers.

Yes, by using `event.preventDefault()` within your event listener. However, some system-level security keys (like Ctrl+Alt+Del on Windows or Command+Tab on macOS) cannot be intercepted by a web page.

Yes. The `event.code` will show the physical position (e.g., "KeyQ" for the top-left letter key), while `event.key` will show the actual character produced by your layout (e.g., "a" on AZERTY). This separation allows developers to support all keyboard layouts simultaneously.

Dead keys are modifier keys that do not generate a character immediately but modify the *next* character pressed. For example, pressing `Alt`+`e` on a Mac prepares an accent, and the next vowel pressed will appear with that accent. The `event.key` for the initial press is often "Dead".