Browser Keyboard Test: On-Screen Layout and Key Codes

Press a key and the matching key on the on-screen layout turns yellow, then stays green until you reset the board. The line under the board names the key and prints the code the browser reported; the events stay in the page and are never uploaded.

Runs locally in your browser
Esc
F1
F2
F3
F4
F5
F6
F7
F8
F9
F10
F11
F12
Print
Scrn
Scroll
Lock
Pause
Break
~
`
!
1
@
2
#
3
$
4
%
5
^
6
&
7
*
8
(
9
)
0
—
-
+
=
Backspace
Insert
Home
Page
Up
Num
Lock
/
*
Tab
Q
W
E
R
T
Y
U
I
O
P
{
[
}
]
|
\
Del
End
Page
Down
7
Home
8
↑
9
Pg Up
Caps
Lock
A
S
D
F
G
H
J
K
L
:
;
"
'
Enter
4
←
5
6
→
Shift
Z
X
C
V
B
N
M
<
,
>
.
?
/
Shift
↑
1
End
2
↓
3
Pg Dn
Ctrl
Win
Alt
Space
Alt
Win
Menu
Ctrl
←
↓
→
0
Ins
.
Del
-
+
Enter
When testing numeric keypad keys, the reported value can depend on Num Lock and the operating system.

How to test a keyboard in the browser

Press a key on your physical keyboard and the matching key on the on-screen layout lights up: yellow for the press, then green, where it stays until you reset the board. The line under the board names the key and the key code the browser reported.

Key events are read in the browser only, so the page works offline and nothing is sent anywhere: no key is logged, stored or uploaded, and the test stops when the tab loses focus.

  1. Click the page once, so the window has focus — a browser only reports key events to the focused tab.
  2. Press any key. The matching key on the board flashes yellow and then stays green as a mark that you already pressed it.
  3. Read the line under the board: it shows the key name and the key code the browser delivered for that press.
  4. Press Reset all keys to clear the green marks and start a fresh pass.

What the page reports

Green marks are a trail, not a verdict

The board is a standard 104-key desktop layout. Yellow means “this is the key you just pressed”, green means “this key has been pressed at least once since the last reset”. Any key you have not touched stays white, so a quick sweep shows which keys never responded.

Keys are matched by the code the key sends, not by the label printed on your keyboard. On an AZERTY or Dvorak keyboard the highlight follows the physical position that produces that code, and the line under the board shows the code itself.

Left and right modifiers, and the numpad

Both Shift keys, both Ctrl keys, both Alt keys and the two Enter keys send the same key code. The page uses the physical key that was pressed, so the right-hand Shift lights up the right Shift on the board instead of always the left one.

With Num Lock off, the numpad reports navigation codes: Num 5 becomes Clear (12), Num 1 becomes End (35), Num 7 becomes Home (36). The numpad key still lights up on the board, and the line under it prints the code the browser reported — which is exactly the mismatch that confuses people most often.

Keys the page never sees

Shortcuts are handled by the browser or the operating system before any page gets the event: Ctrl+W or Cmd+W, Cmd+Tab, F1 help, Print Screen, and the volume and media keys on most laptops. Nothing lights up, because nothing reached the page.

The Fn layer on a laptop, a keyboard with onboard remapping, and gaming drivers that send macros sit below the browser as well. If a key works in another program but not here, the event is being consumed or rewritten before the page sees it rather than being broken.

What it does not measure

It shows the events the browser delivers, one at a time. It cannot measure key rollover, actuation distance, latency, chatter or repeat delay, and it does not test a cable, a receiver or a switch.

Touch screens and on-screen keyboards produce no physical key events, so on a phone or tablet the board is a layout reference only. On a narrow screen the board can be panned sideways to reach the right-hand block.

Recent tools: