Mock JSON Generator
Describe a shape and get as many rows of matching JSON as you need.
Press any key and see event.key, event.code and the modifier state.
—
Click here, then press any key
The Keycode Tester shows every property of a keyboard event at once — key, code, the deprecated keyCode, location and the modifier flags — so the difference between what was typed and which key was pressed is visible rather than theoretical.
Press any key and every property of the event is shown at once: event.key, event.code, the deprecated keyCode and which, the location, the modifier flags and whether the browser considers it a repeat.
Seeing key and code side by side is the point, because they answer different questions. event.key is the character produced, so it changes with the keyboard layout and with Shift — on a French layout the key above Tab gives a different key. event.code is the physical position, so it stays KeyW wherever the keyboard is from, which is why games use it and text input does not. Choosing the wrong one is how a shortcut works for you and not for someone in another country.
One is the character produced and changes with layout and Shift; the other is the physical position and does not. Seeing both is the whole point.
Ctrl, Shift, Alt and Meta flags, which matters because Mac users press Command where Windows users press Control.
The only way to distinguish left Shift from right, or the number pad from the number row.
Which property to use for which job, so a shortcut works on a keyboard from another country.
keyCode and which are shown for reading older code, alongside a note that neither belongs in new code.
Any key, including modifiers and function keys.
One is the character produced, the other is the physical position.
key changes, code does not — which is the whole distinction.
Click any value to copy it into a comparison in your code.
event.key for anything about what the user typed — a shortcut like Ctrl+S, or checking for Enter and Escape. event.code for physical position, such as WASD in a game, where the letter printed on the key does not matter.
Because it conflated character and position, differed between browsers, and had no sensible values for non-Latin layouts. It still works everywhere but should not be used in new code.
Usually because preventDefault was not called, so the browser handled it first. Check event.ctrlKey and event.metaKey separately too — Mac users press Command, not Control.
It distinguishes the left Shift from the right one, and the number pad from the number row. It is the only way to tell them apart, since both report the same key.
What people who use the JavaScript Keycode Tester think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
0 reviews
Newest first
No reviews yet
Be the first to rate the JavaScript Keycode Tester. It takes half a minute and no account.
Write the first reviewDescribe a shape and get as many rows of matching JSON as you need.
Identify a UUID's version and variant, and extract its timestamp.
Convert HTML back into clean Markdown, keeping lists, tables and code.
Build CSS keyframe animations and watch them run as you edit.
Tidy a TOML file: consistent quoting, ordered tables, keys before headers.
Convert a name between camelCase, snake_case, kebab-case and the rest.
Normalise YAML indentation, quoting and key order in one pass.
Compare two semantic versions and test them against a range.