Guide

event.key vs event.code vs keyCode: which one should you use

Use event.key when you care about the character the user produced, and event.code when you care about the physical key they pressed. The difference is layout: press the key right of Tab on a French AZERTY keyboard and event.key is "a" while event.code is "KeyQ". Do not use keyCode in new work. It is the deprecated legacy model, its values are not consistent across browsers for several keys, and both replacements are better defined.

Run the test nowRead event.key, code, keyCode and which for any key you press.Open the key code viewer

The one-sentence rule

If your feature is about text, use key. If it is about position, use code.

A shortcut like Control plus S for save is about the character, so key is right: it should be the S key wherever S lives on that user's layout. WASD movement in a game is about position, so code is right: the four keys should be the physical cluster under the left hand, whatever letters are printed on them. Getting this backwards is why some games are unplayable on AZERTY and why some editors refuse to save on a Dvorak layout.

What each property actually is

The three keyboard event properties compared
PropertyDescribesChanges with layoutStatus
event.keyThe character or named key produced, for example "a", "A", "Enter", "ArrowLeft"Yes, and it also changes with modifiers: Shift turns "a" into "A"Current. Defined by the UI Events KeyboardEvent key values specification.
event.codeThe physical key position, for example "KeyA", "Enter", "ArrowLeft"No. It names the key as it sits on a US QWERTY board regardless of your layoutCurrent. Defined by the UI Events KeyboardEvent code values specification.
event.keyCodeA numeric code from the pre-standard era, for example 65 for APartly, and inconsistentlyDeprecated. Kept for compatibility; several keys have no stable value across browsers.
event.whichThe same number as keyCode in practiceSame as keyCodeDeprecated, and redundant even against keyCode.

Field definitions from the W3C UI Events specifications, read 5 August 2026: uievents-key for key values, uievents-code for code values, and the legacy key models section of uievents for keyCode. The full per-key reference table lives on the key code viewer page and at /data/key-codes.

Why keyCode is a problem, concretely

The complaint is usually stated as an abstraction, which makes it easy to ignore. The concrete version is more convincing.

Left Shift and right Shift both report 16, so keyCode alone cannot tell them apart. The main Enter and the numpad Enter both report 13, same problem. The Meta key, which is Windows on a PC and Command on a Mac, has been reported as 91, as 93 and as 224 depending on the browser, the version and the operating system, which means there is no single value you can write down.

event.code solves all three by naming the position: ShiftLeft and ShiftRight, Enter and NumpadEnter, MetaLeft and MetaRight. That is the whole argument.

None of this means keyCode stopped working. It is still reported by every browser, because removing it would break a great deal of existing code. Deprecated means do not build new things on it, not that the old things fell over.

Run the test nowRead event.key, code, keyCode and which for any key you press.Open the key code viewer

Practical patterns

  • Text shortcuts: match on event.key, and compare case-insensitively unless the case is meaningful. Remember that Shift changes key, so a Control plus Shift shortcut needs care.
  • Positional controls: match on event.code. The values are stable and layout-independent, which is exactly what a game needs.
  • Modifier state: use the boolean properties event.ctrlKey, event.shiftKey, event.altKey and event.metaKey rather than trying to track modifier keydown and keyup yourself. Tracking them by hand breaks the moment the window loses focus while a modifier is held.
  • Never assume a key produces an event. The operating system claims some keys before the browser sees them, and PrintScreen in particular often produces only a keyup or nothing at all.
  • Do not use keyCode to detect Meta. There is no value you can rely on. Use event.metaKey.

Checking any of this in ten seconds

The key code viewer shows all four values plus the modifier state for whatever key you press, live. That is faster than reading a table when your question is about one specific key on one specific layout, and it is the only way to see what your browser does rather than what a specification says it should.

It matters more than it sounds. Layout, operating system and browser all influence the result, and the only authoritative answer for your user is the one their browser produces. When you are debugging a shortcut that works for you and not for a colleague, that page settles it in one press each.

The full reference table, covering letters, digits, punctuation, modifiers, function keys and the numpad, is on that page and is also available as JSON and CSV for anyone who wants to work with it directly.

Frequently asked questions

Should I use event.key, event.code or keyCode?

Use event.key for character-based behaviour and event.code for position-based behaviour. Do not use keyCode in new code: it is deprecated and several keys have no stable value across browsers.

What is the difference between event.key and event.code?

event.key is the character the layout produced, so it changes with layout and with modifiers. event.code names the physical key position and never changes. The same physical key gives key "a" and code "KeyQ" on an AZERTY layout.

Why is keyCode deprecated?

It predates the standard, it conflates several distinct keys under one number, and its values are inconsistent between browsers for keys including Meta. The specification keeps it documented for compatibility and directs new work to key and code.

Is keyCode going to be removed?

There is no sign of it. Too much existing code depends on it. Deprecated here means it should not be the basis for anything new, not that it will stop working next year.

How do I detect Control plus S across platforms?

Match event.key against "s" case-insensitively, and check event.ctrlKey for Windows and Linux and event.metaKey for macOS. Do not try to identify the modifier by its numeric code.

Why do left and right Shift look the same in my handler?

Because you are reading keyCode, where both are 16. event.code distinguishes them as ShiftLeft and ShiftRight. The older event.location property also does, if you need to support very old browsers.

Does event.code work on mobile keyboards?

Not reliably. Software keyboards often send composition events or an empty code, because there is no physical key to name. Positional key handling is a desktop assumption and should degrade gracefully.

Where can I get the full key code table as data?

The complete table is published at /data/key-codes as a page, as JSON at /api/v1/key-codes and as a CSV download, under CC BY 4.0. Attribution with a link back is all that is asked.

Run the test nowRead event.key, code, keyCode and which for any key you press.Open the key code viewer

Related

This guide belongs with the key code viewer. If you are working through a whole machine rather than one device, the full check walks you through every test in order.