Keyboard Event Code Tester

Q: How do I use these codes in my own JavaScript?

You can add an event listener and check the properties of the event object. For example, to detect the spacebar, you would use `window.addEventListener('keydown', (event) => { if (event.code === 'Space') { /* your code here */ } });`

Q: Does this tool capture all keys?

Yes, it should capture almost any key, including modifier keys (Shift, Alt, Ctrl), function keys (F1-F12), and keys from international keyboards. It shows exactly what the browser reports for each key press.

Tools

Keyboard Event Code Tester

Add to Favorites Remove from Favorites

Press any key to begin

keydown

keypress

keyup

event.key

event.code

event.which (deprecated)

event.keyCode (deprecated)

Modifier Keys

event.metaKey

event.altKey

event.ctrlKey

event.shiftKey

About the Keyboard Event Tester

Our Keyboard Event Tester is a simple tool we built for web developers to see what's happening under the hood when you press a key. Every key press on a webpage fires JavaScript events like `keydown`, `keyup`, and `keypress`. This tool captures those events and displays all the important information, like `event.key` and `event.code`, in real-time.

This is useful when you are building keyboard shortcuts or any feature that needs to respond to keyboard input. Instead of guessing the correct code for a specific key, you can just press it and get the exact values you need. We made sure to include both modern and deprecated properties to help with supporting older browsers.

How to Use the Tool

Click anywhere inside the large box that says "Press any key to begin".
Press any key on your keyboard (e.g., `A`, `Shift`, `Enter`, or `F5`).
The tool will instantly display the value of `event.key` in large text at the top.
All other properties, such as `event.code`, `event.keyCode`, and the status of modifier keys (`Shift`, `Ctrl`, etc.), are shown in the tables below.
The "Event Lights" will show you which event (`keydown`, `keypress`, or `keyup`) was the last one to fire.

Frequently Asked Questions

What are JavaScript Keyboard Events?

There are three main keyboard events: `keydown` fires when you first press a key, `keypress` fires when a key that produces a character is held down, and `keyup` fires when you release the key. This tool shows you the data from all three.

What's the difference between `event.key` and `event.code`?

This is a crucial distinction. `event.code` represents the physical key you pressed on your keyboard (e.g., `KeyA`, `ShiftLeft`). `event.key` represents the character value that was generated by that key press (e.g., `a` or `A`). You should use `event.code` for shortcuts (like game controls) and `event.key` for text input.

Why are `keyCode` and `which` deprecated?

`keyCode` and `which` are older properties that were inconsistent across different browsers and operating systems. For example, the `keyCode` for the same key could be different on a Mac versus a Windows machine. The modern `key` and `code` properties were introduced to solve these problems and are the recommended standard today. We include the deprecated values to help developers working on older codebases.

How do I use these codes in my own JavaScript?

You can listen for a keyboard event on the `window` or any input element and check the properties of the event object. For example, to listen for the spacebar to be pressed, you would use `event.code` like this:

window.addEventListener('keydown', (event) => {
  if (event.code === 'Space') {
    console.log('Spacebar was pressed!');
    // Your code here...
  }
});

Does this tool capture all keys?

Yes, it should capture almost any key you press, including modifier keys (`Shift`, `Alt`, `Control`, `Meta`/`Cmd`), function keys (`F1`-`F12`), and keys from international keyboards. Some keys, especially on laptops or gaming keyboards, might not have standard codes, but this tool will show you exactly what the browser reports for them.