JavaScript Keycode Finder

About JavaScript Keycode Finder

How JavaScript Keyboard Events Work

When a user presses a key, the browser fires a KeyboardEvent object containing several properties that describe what happened. The three main event types are keydown, keyup, and the now-deprecated keypress. Each carries the same set of properties, but they fire at different points in the key lifecycle.

The keydown event fires the moment a key is physically pressed, before the character appears in an input field. This makes it the right place to intercept shortcuts or prevent default browser behaviour (like Ctrl+S triggering a save dialog). If the user holds the key down, keydown fires repeatedly at the OS key-repeat rate. The keyup event fires once when the key is released, making it useful for detecting when a modifier like Shift or Alt is no longer held. The keypress event only fired for keys that produce a character (so it ignored Escape, arrows, and function keys) and has been formally deprecated by the W3C since 2016.

Event	Fires When	Repeats on Hold?	Best For
keydown	Key is pressed down	Yes	Shortcuts, game controls, preventing default actions
keyup	Key is released	No	Detecting when a modifier key is released
keypress	Character key pressed	Yes	Deprecated - do not use in new code

Practical example: To build a keyboard shortcut that saves a document with Ctrl+S, you would listen for keydown, check if e.ctrlKey is true and e.key equals "s", then call e.preventDefault() to stop the browser's default save-page dialog. The full code looks like this: document.addEventListener('keydown', (e) => { if (e.ctrlKey && e.key === 's') { e.preventDefault(); saveDocument(); } });

What Are the KeyboardEvent Properties?

Every KeyboardEvent carries these properties. The tool above shows all of them for whatever key you press.

Property	Type	What It Returns	Example (pressing "a")
event.key	String	The character value produced by the key	"a" (or "A" with Shift)
event.code	String	The physical key on the keyboard	"KeyA" (regardless of layout)
event.keyCode	Number	Numeric code for the key (deprecated)	65
event.which	Number	Alias for keyCode (deprecated)	65
event.location	Number	Where the key is physically located	0 (standard position)
event.altKey	Boolean	Whether Alt/Option was held	false
event.ctrlKey	Boolean	Whether Ctrl was held	false
event.shiftKey	Boolean	Whether Shift was held	false
event.metaKey	Boolean	Whether Meta (Cmd/Win) was held	false

event.key vs event.code - Which Should You Use?

This is the most important distinction in modern keyboard handling, and picking the wrong one causes real bugs. The event.key property returns the logical character the key produces, taking into account the current keyboard layout, language, and modifier state. The event.code property returns a fixed identifier for the physical key, regardless of layout.

Aspect	event.key	event.code
Returns	The character or key name	The physical key identifier
Affected by layout?	Yes - changes with language/layout	No - always refers to physical position
With Shift held	Returns "A" (uppercase)	Still returns "KeyA"
On AZERTY keyboard	Physical Q key returns "a"	Physical Q key returns "KeyQ"
On Dvorak keyboard	Physical S key returns "o"	Physical S key returns "KeyS"
Use for	Text input, character-based shortcuts	Game controls, position-based shortcuts (WASD)

For application shortcuts like Ctrl+S (save) or Ctrl+Z (undo), use event.key. You want the logical meaning of the key - "s" for save - so it works correctly on French AZERTY keyboards where the physical S key types a different letter. For game controls where WASD maps to movement directions based on physical finger position, use event.code. A French user with an AZERTY keyboard would otherwise have to press ZQSD instead of WASD, which is awkward and unexpected.

Both event.key and event.code reached W3C Recommendation status on 22 April 2025. Browser support is universal across Chrome, Firefox, Safari, and Edge on desktop. On mobile, virtual keyboards have a known limitation in Blink and WebKit-based browsers where event.code may report "Unidentified" since there is no physical key to reference.

KeyboardEvent.location Values

The location property tells you where on the keyboard a key sits. This matters for keys that appear more than once, like Shift, Ctrl, Alt, and the numpad duplicates of number keys. The MDN Web Docs define four location constants.

Value	Constant	Meaning	Keys
0	DOM_KEY_LOCATION_STANDARD	General area or only one version exists	Most keys (letters, numbers, function keys)
1	DOM_KEY_LOCATION_LEFT	Left side of keyboard	Left Shift, Left Ctrl, Left Alt, Left Meta
2	DOM_KEY_LOCATION_RIGHT	Right side of keyboard	Right Shift, Right Ctrl, Right Alt, Right Meta
3	DOM_KEY_LOCATION_NUMPAD	Numeric keypad	Numpad 0-9, Numpad Enter, Numpad operators

A practical use case: if you are building an accessibility tool that needs to know which Shift key was pressed, checking e.location === 1 (left) or e.location === 2 (right) gives you that distinction. Without the location property, both keys return identical event.key and event.keyCode values.

Common Key Values Reference

Key	event.key	event.code	keyCode (deprecated)
Enter	"Enter"	"Enter"	13
Escape	"Escape"	"Escape"	27
Space	" "	"Space"	32
Tab	"Tab"	"Tab"	9
Backspace	"Backspace"	"Backspace"	8
Delete	"Delete"	"Delete"	46
Arrow Up	"ArrowUp"	"ArrowUp"	38
Arrow Down	"ArrowDown"	"ArrowDown"	40
Arrow Left	"ArrowLeft"	"ArrowLeft"	37
Arrow Right	"ArrowRight"	"ArrowRight"	39
Shift	"Shift"	"ShiftLeft"/"ShiftRight"	16
Ctrl	"Control"	"ControlLeft"/"ControlRight"	17
Alt	"Alt"	"AltLeft"/"AltRight"	18
Meta (Cmd/Win)	"Meta"	"MetaLeft"/"MetaRight"	91
F1	"F1"	"F1"	112
F5	"F5"	"F5"	116
F12	"F12"	"F12"	123
0	"0"	"Digit0"	48
a	"a"	"KeyA"	65
;	";"	"Semicolon"	186

Why keyCode Is Deprecated

The event.keyCode property was deprecated because its values are inconsistent across browsers, operating systems, and keyboard layouts. Pressing the semicolon key, for instance, returns keyCode 186 in Chrome and Edge but 59 in Firefox. The same physical key on a German keyboard returns a completely different keyCode than on a US keyboard. These inconsistencies made reliable cross-browser keyboard handling nearly impossible without lookup tables full of special cases.

The W3C addressed this by standardising two replacement properties: event.key for the logical character value, and event.code for the physical key identifier. Both follow published specifications (UI Events KeyboardEvent key Values and UI Events KeyboardEvent code Values) that reached full W3C Recommendation status in April 2025. Browsers have supported both properties since around 2015-2016, so migration is safe for all modern projects.

Old API (deprecated)	Modern Replacement	Migration Note
event.keyCode	event.key or event.code	Use key for characters, code for physical keys
event.which	event.key or event.code	Same as keyCode - both are deprecated
event.charCode	event.key	key gives the character directly as a string
keypress event	keydown event	keydown fires for all keys including modifiers

keyCode Number Ranges

Even though keyCode is deprecated, many existing codebases still reference these numbers. Knowing the ranges helps when reading legacy code or migrating to event.key.

Range	Keys	Modern Equivalent
8-46	Control keys (Backspace 8, Tab 9, Enter 13, Shift 16, Ctrl 17, Alt 18, Escape 27, Space 32, Delete 46)	Check event.key for "Backspace", "Tab", "Enter", etc.
48-57	Number row digits 0-9	event.code: "Digit0" through "Digit9"
65-90	Letters A-Z (always uppercase regardless of Shift state)	event.code: "KeyA" through "KeyZ"
96-105	Numpad digits 0-9	event.code: "Numpad0" through "Numpad9"
112-123	Function keys F1-F12	event.code: "F1" through "F12"
186-222	Punctuation and symbols (; = , - . / ` [ \ ] ')	These vary by browser - the strongest reason to use event.key instead

The punctuation range (186-222) is where keyCode causes the most trouble. Firefox historically used different values from Chrome and Edge for several of these keys, which is a major reason the W3C deprecated the entire property.

Common Mistakes When Handling Keyboard Events

A few patterns cause frequent bugs in keyboard event handling:

Checking keyCode in new code. Legacy tutorials still show if (e.keyCode === 13) for Enter detection. The modern equivalent is if (e.key === 'Enter'), which is more readable and consistent across browsers. If you are maintaining an older codebase, search for .keyCode and .which to find all instances that should be migrated.

Using event.key for game controls. WASD movement keys should use event.code ("KeyW", "KeyA", "KeyS", "KeyD") because event.key changes with keyboard layout. A French user on AZERTY would have to press ZQSD instead of WASD if you use event.key.

Forgetting e.preventDefault(). Without it, pressing Tab moves focus away from your game or editor, Space scrolls the page, and F5 refreshes the page entirely. Call e.preventDefault() on keydown for any key you are intercepting. Be careful not to block accessibility-critical keys like Tab navigation unless you provide an alternative.

Listening on the wrong event. If you listen for keyup to trigger a game jump, the character jumps when the key is released rather than when pressed - introducing noticeable input lag. Use keydown for immediate response, keyup only when you need to detect the release.

Ignoring modifier state. A shortcut bound to the "s" key will fire during Ctrl+S unless you also check that e.ctrlKey, e.altKey, and e.metaKey are false. Always verify modifier state when binding single-key shortcuts.

Not handling key repeat. When a key is held down, keydown fires repeatedly. If your handler does something expensive like triggering an API call, it will fire dozens of times per second. Check the e.repeat boolean property - it is false on the first press and true for all auto-repeat events - and skip repeat events when appropriate.

Keyboard Events on Mobile Devices

Virtual keyboards on phones and tablets behave differently from physical keyboards. In Blink-based browsers (Chrome on Android) and WebKit-based browsers (Safari on iOS), event.code often returns "Unidentified" because there is no physical key to reference. The event.key property works more reliably, returning the actual character typed. For mobile text input, the input and beforeinput events from the Input Events API are generally more reliable than keydown/keyup, since they work consistently across physical keyboards, virtual keyboards, autocomplete, and voice input.

For looking up ASCII character codes, the ASCII Table shows decimal, hex, and binary values for all 128 standard characters. For pattern matching keyboard input, the Regex Tester lets you build and test regular expressions. For detecting browser and OS details, the User Agent Parser breaks down the UA string into its component parts.

Sources

• MDN Web Docs - KeyboardEvent
• MDN Web Docs - KeyboardEvent.keyCode (deprecated)
• MDN Web Docs - KeyboardEvent.location
• W3C - UI Events KeyboardEvent key Values
• W3C - UI Events KeyboardEvent code Values
• W3C News - KeyboardEvent key and code Values are W3C Recommendations (April 2025)
• Can I Use - KeyboardEvent.key
• Can I Use - KeyboardEvent.code