Keycode Checker (JavaScript key, code and keyCode)

How to use

1. Click the "Key press area" or move to it with Tab
2. Press the key you want to check. Its event.key, event.code, keyCode and other values appear at once, along with a shortcut label such as Ctrl + Shift + Z
3. Under "Code to match it", choose whether to match by event.key (the character typed) or event.code (the key's position), then copy the code
4. To see what an IME (such as Japanese input) or a phone's on-screen keyboard sends, type in the "Field for IME and on-screen keyboards"
5. Every event is kept in the "Event history", which you can copy as TSV and paste into a spreadsheet

The drawing in the area shows each key at the position its event.code names. A key is filled in while held, the last key pressed gets a heavy outline, and keys pressed before stay shaded, so you can also press keys one by one to check that each responds. event.code names positions on a US layout, so pressing @ on a Japanese (JIS) keyboard marks the BracketLeft position. Switch between JIS and US with "Layout" below it (the English page starts with US, the Japanese page with JIS). "Clear the marks" removes the shading and the heavy outline, and sets "Different keys pressed" (counted by event.code, including keys not on the drawing) back to 0. The numpad, keys missing from the chosen layout (such as ¥ on the US drawing), the Eisu and Kana keys of a Japanese Mac keyboard (Lang2 and Lang1) and keys with an empty event.code cannot be shown, and a line under the drawing says so. On a Mac, Caps Lock may send keydown when it turns on and keyup when it turns off; while the area has focus, it may then stay marked as held for as long as the lock is on.

While the area has focus, keys other than Tab do not do their usual browser action (Space scrolling, F5 reloading and so on), so only their values are shown. Tab moves on to the next item. The keys you press and the text you type never leave your browser and are not saved.

The values shown

• event.key: the character typed, or the key's name. a and Shift + A are different values, and the value changes with the keyboard layout. Space is " " (a single space)
• event.code: the name of the key's position on the keyboard. The key in the A position is always KeyA, whatever the layout or Shift. The names follow the US layout, so the @ key of a Japanese keyboard is BracketLeft
• event.keyCode / event.which: the old numeric codes. They are deprecated and can differ by browser and layout, but are shown for reading older code
• event.location: tells apart keys that appear twice. 0 is standard, 1 left, 2 right and 3 the numpad
• Modifier keys: whether ctrlKey, shiftKey, altKey and metaKey (the Windows key or Mac ⌘) were down
• Lock keys: Caps Lock and Num Lock as read with getModifierState()
• isComposing: whether an IME was in the middle of composing text

Example of the code to match a key

Press Z while holding Ctrl and Shift, choose "event.key (the character typed)", and the tool shows:

document.addEventListener("keydown", (event) => {
  // Ignore keys that an IME is still composing
  if (event.isComposing || event.keyCode === 229) return;
  if (event.key === "Z" && event.ctrlKey && !event.altKey && event.shiftKey && !event.metaKey) {
    event.preventDefault();
    // Handle the key here
  }
});

The code checks all four modifiers, so a Z handler does not fire on Ctrl + Z, and a Ctrl + Z handler does not also fire on Ctrl + Shift + Z. A modifier pressed on its own is matched by its name only. Note that with Shift held, event.key is the capital "Z".

• Match by event.key when the character matters, such as "? opens help". Any layout that types the same character matches. The generated code also checks the modifiers you held, though, and layouts reach the same character with different ones (@ is AltGr + Q on a German layout), so remove the modifier checks to match on the character alone
• Match by event.code when the position matters, such as WASD movement in a game. It works with the key in the same place on any layout

IME input and Japanese keyboard keys

• Keys during composition (keyCode 229): the Enter that confirms a Japanese conversion arrives with keyCode 229, and in most browsers with isComposing set to true. Some browsers leave isComposing as false, so to stop a form that submits on Enter from submitting when a conversion is confirmed, skip the event when either one is true. Typing in the field also shows the order of events from compositionstart to compositionend in the history
• Henkan, Muhenkan and Katakana/Hiragana: their event.code values are Convert, NonConvert and KanaMode
• Hankaku/Zenkaku: its event.code is Backquote, the key in the same place on a US layout. Its event.key depends on the browser and IME
• ¥ and \ ro: keys a US layout does not have, with event.code IntlYen and IntlRo
• Eisu and Kana on a Mac: per the specification, event.code is Lang2 (Eisu) and Lang1 (Kana)
• Eisu on Windows: on a Japanese keyboard this key sits where Caps Lock is, and its event.code is CapsLock

The keyCode of these keys differs by browser, OS and IME state, so the list shows "—" for them. Press them to see what your setup sends.

FAQ

Should I stop using keyCode?

Yes. keyCode and which are deprecated, and for punctuation keys they differ between browsers (; is 186 in Chrome and 59 in Firefox, for example). Use event.key or event.code in new code. The exception is keyCode === 229 for spotting IME composition: some browsers send isComposing as false in that case, so checking both is recommended.

Some keys show nothing when pressed

The browser or OS handles keys such as Ctrl + W (close tab) and Ctrl + Tab before the page, so no event reaches it. On a Mac, the Fn key usually does not send an event of its own either.

On my phone key is Unidentified

On-screen keyboards, especially on Android, often send key as Unidentified and keyCode as 229 until a character is settled. The character typed can be read from the data of the input event. Type in the "Field for IME and on-screen keyboards" and it appears on the input rows of the history.

Can I use this to check whether my keyboard works?

Yes. If a value appears when you press a key, its signal is reaching the browser. Keys you have pressed stay shaded on the drawing, so the ones not yet tried stand out. "Keys held down" and the filled keys on the drawing show which keys are down at once, and "Most keys held at once" shows how many your keyboard can register together. Keys that the OS or browser handles first are not shown.

Does it show keypress events?

No. keypress is deprecated and browsers differ a lot, for example in not firing it for keys that do not type a character. The current way to handle typed text is the input event (and beforeinput).