Key Code Viewer
Displays key codes (key, code, which) when any key is pressed.
Press any key
event.key-
event.code-
event.keyCode-
Why Use a Key Code Viewer?
For a JavaScript developer, capturing keyboard events is a common task. However, the `KeyboardEvent` object offers different properties to identify a key, and not all are the same. This tool allows you to quickly debug and understand the differences without having to write `console.log()` in your code.
Understanding the Properties
- event.key: Represents the character value generated by the key. It is case-sensitive and keyboard layout-aware (e.g., 'a', 'A', 'ñ', 'Enter'). This is the recommended option in most cases.
- event.code: Represents the physical key that was pressed on the keyboard, ignoring the layout or whether Shift was active (e.g., 'KeyA', 'ShiftLeft', 'Enter'). It is ideal for keyboard shortcuts or game controls (WASD).
- event.keyCode (deprecated): This is the old property for identifying keys. Its use is discouraged because its values can vary between browsers and operating systems, but this tool displays it in case you need to support legacy code.