How Browser-Based Keyboard Testers Detect Key Presses with JavaScript

Online keyboard testers look simple from the outside: press a key, and the matching key lights up on the screen.

Behind that simple interaction, the browser is listening for keyboard events and using JavaScript to identify which key was pressed, whether it is still being held, and when it is released.

This makes keyboard testing possible directly in the browser without installing extra software.

The Main Keyboard Events

JavaScript usually relies on two important keyboard events:

keydown
and
keyup
keydown fires when a key is pressed.
keyup fires when the key is released.

A basic example looks like this:

document.addEventListener("keydown", (event) => {
  console.log("Pressed:", event.key);
});

document.addEventListener("keyup", (event) => {
  console.log("Released:", event.key);
});

With just these two events, a web page can already detect a large part of normal keyboard activity.

event.key vs event.code

Two properties are especially useful:

event.key
and
event.code
They are related, but they are not the same.
event.key usually represents the actual character or action produced by the key.

For example:

console.log(event.key);

might return:

a
A
Enter
Shift
ArrowLeft
event.code
represents the physical key position on the keyboard.
For example:

console.log(event.code);

might return:

KeyA
Enter
ShiftLeft
ArrowLeft

For a visual keyboard tester, event.code is often useful because it maps more directly to a specific physical key.

Highlighting a Key on the Screen

A browser-based keyboard tester can create a visual keyboard using HTML elements.

For example:

<button data-code="KeyA">A</button>
<button data-code="KeyB">B</button>
<button data-code="Space">Space</button>

JavaScript can then find the matching element when a key is pressed:
document.addEventListener("keydown", (event) => {
  const key = document.querySelector(
    `[data-code="${event.code}"]`
  );

  if (key) {
    key.classList.add("active");
  }
});

When the key is released, the active state can be removed:

document.addEventListener("keyup", (event) => {
  const key = document.querySelector(
    `[data-code="${event.code}"]`
  );

  if (key) {
    key.classList.remove("active");
  }
});

This is the basic idea behind the visual response you see in many online keyboard testing tools.

Tracking Multiple Keys at Once

A more useful keyboard tester should also track multiple simultaneous key presses.

One common method is to store currently pressed keys in a JavaScript Set.

const pressedKeys = new Set();

document.addEventListener("keydown", (event) => {
  pressedKeys.add(event.code);

  console.log([...pressedKeys]);
});

document.addEventListener("keyup", (event) => {
  pressedKeys.delete(event.code);
});

If you press:

W + Shift + Space
the set might contain:
["KeyW", "ShiftLeft", "Space"]

This makes it possible to display how many keys are being held at the same time.

Detecting Maximum Simultaneous Keys
A keyboard tester can also record the highest number of keys detected at once.

let maxKeys = 0;

document.addEventListener("keydown", (event) => {
  pressedKeys.add(event.code);

  maxKeys = Math.max(maxKeys, pressedKeys.size);

  console.log("Maximum simultaneous keys:", maxKeys);
});

This can be useful when testing gaming keyboards or checking rollover behavior.

What Is Keyboard Ghosting?

Keyboard ghosting happens when certain combinations of keys are not registered correctly.

For example, you may press:

W + A + Shift + Space
but the computer may detect only three of those keys.
A browser-based tester cannot change the hardware limitation, but it can help reveal it.

By showing every detected key in real time, the user can compare what they physically pressed with what the browser actually received.

For a working example, you can try KeyboardTest.org, which provides browser-based keyboard testing and visual key detection.

Testing Gaming Key Combinations

Gaming keyboards are often tested with combinations such as:

W + A + Shift
W + D + Space
Ctrl + Shift + Space
W + A + Shift + Space

These combinations are useful because games often require several keys at the same time.

A visual tester can make it easy to see whether all keys are being detected correctly.

Detecting Repeated Key Events

When a user holds a key down, browsers may repeatedly fire the keydown event.

JavaScript exposes this through:

event.repeat

Example:
document.addEventListener("keydown", (event) => {
  if (event.repeat) {
    console.log("Key is being held:", event.code);
  }
});

This is useful because a keyboard tester may want to distinguish between a fresh press and a key that is simply being held.
Modifier Keys

JavaScript also exposes modifier-key information.
For example:

document.addEventListener("keydown", (event) => {
  console.log("Shift:", event.shiftKey);
  console.log("Ctrl:", event.ctrlKey);
  console.log("Alt:", event.altKey);
  console.log("Meta:", event.metaKey);
});

This can help when testing shortcuts or more complex keyboard combinations.

Browser Limitations

A browser-based keyboard tester is useful, but it cannot detect everything.

Some key combinations may be intercepted by:

• the browser
• the operating system
• accessibility shortcuts
• hardware firmware
• function-key behavior

For example, certain system shortcuts may trigger an operating-system action before the webpage can fully handle them.
Laptop function keys can also behave differently depending on whether the Fn key is active.

Why Browser-Based Testing Is Useful

Despite those limitations, browser-based keyboard testing has several advantages.

There is usually:

• no software installation
• no account required
• instant visual feedback
• support for most common keys
• easy multiple-key testing
• quick troubleshooting

It is especially useful for checking:

• dead keys
• stuck keys
• gaming combinations
• keyboard rollover
• basic ghosting behavior
• used or refurbished keyboards

Final Thoughts

A browser-based keyboard tester is built around a relatively simple idea: listen for keydown and keyup events, identify each key using properties such as event.code, and update the interface in real time.

With a little additional state management, the same JavaScript can track held keys, simultaneous presses, repeated input, and rollover behavior.

That combination of browser events and visual feedback is what makes an online keyboard tester useful for quick hardware troubleshooting.