Utilia
Categories ▾
Language: en ▾

Keyboard Key Code Finder

Press any key to see its JavaScript event.key, event.code, keyCode, which and location values, with modifiers, a key history and a full keycode table.

Press “Start capturing keys” or click the box below, then press any key. Click outside the box to give the keyboard back to the page.

event.key Press a key keyCode – Tab, arrows and shortcuts are captured here too.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Lock keys on
–
Modifiers
ctrlKey shiftKey altKey metaKey
Key history (latest first)
Key history (latest first)
EventkeycodekeyCodelocationModifiersrepeat
Key code reference (US QWERTY)

Key code reference (US QWERTY)
keycodekeyCodelocationNote

key values are for a US layout without modifiers; other layouts produce other characters for the same code. keyCode and which are deprecated but still widely used.

How to find a key code

  1. Press Start capturing keys, or click the large box. A coloured border shows that it is listening.
  2. Press any key or shortcut. The big display shows the key value and the legacy keyCode, and the cards below list event.key, event.code, event.keyCode, event.which, event.location, event.repeat and the Lock keys on (Caps Lock, Num Lock, AltGraph).
  3. The Modifiers badges light up for ctrlKey, shiftKey, altKey and metaKey.
  4. Copy the JavaScript snippet for this key. Use Match on to choose between event.key, event.code or event.keyCode (legacy).
  5. Scroll the Key history (latest first) to compare several presses. Tick Also log keyup events to see releases too.
  6. Browse or filter the Key code reference (US QWERTY) table when you need a value without pressing the key.

While the box has focus, the default action of each key is blocked, so Tab, the arrow keys, Backspace or Ctrl+S are captured instead of moving the focus or opening a dialog. Click anywhere outside the box to give the keyboard back to the page. A few shortcuts are handled by the operating system before the browser sees them (Alt+Tab, Ctrl+Alt+Del, Cmd+Tab, often Print Screen), so no web page can read them.

key, code or keyCode: which one should you use?

A KeyboardEvent carries several values that answer different questions:

Property What it tells you Example (the A key on AZERTY)
key The character or named key produced, after layout and modifiers "a", "A" with Shift
code The physical key position, independent of the layout "KeyQ"
keyCode / which A legacy number, usually the uppercase ASCII code of the letter 65
location 0 standard, 1 left, 2 right, 3 numeric keypad 0

Use key when the meaning matters: Enter to submit, Escape to close, “?” to open a help panel. Use code for games and shortcuts that depend on the position of the keys, such as WASD movement, which should stay in the same place on a French AZERTY or German QWERTZ keyboard. Avoid keyCode and which in new code: they are deprecated, their values vary between browsers for punctuation (Firefox sends 59 for the semicolon where Chrome sends 186) and they cannot tell the left and right Shift keys, or the two Enter keys, apart. They are still worth knowing when you maintain older code, which is why this tool shows them.

About the snippet

The generated listener matches the exact key you pressed, including Ctrl, Alt and Meta. For printable characters matched on key, Shift is left out because it is already part of the value: Shift+1 gives "!" on a US layout. When you press a modifier on its own, the snippet does not repeat its flag. Remember that metaKey is the Cmd key on a Mac and the Windows key on a PC, so cross-platform shortcuts usually test event.ctrlKey || event.metaKey.

Frequently asked questions

Why does keyCode show the same number for different characters?

keyCode identifies the key, not the character. The digit 1 and “!” share 49, and “a” and “A” share 65. Read key to get the real character.

Why is my AZERTY key shown as KeyQ?

code names keys after their position on a US QWERTY keyboard. The key labelled A on a French keyboard sits where Q is on a US one, so its code is KeyQ while its key is “a”.

What does "Dead" mean in event.key?

It is a dead key, such as ^ or ¨ on a French keyboard, which waits for the next key to build an accented letter. The final character is delivered by the following key event or by the input event of a text field.

Why does event.repeat say yes?

You are holding the key down and the operating system is sending automatic repeats. Check event.repeat to ignore them, for example to fire a shortcut only once.

Is anything I type recorded or sent?

No. The key events are read by this page in your browser and are never sent anywhere. The history disappears when you reload or leave the page.

Related tools