Tool Keycode Info

Keycode Info - Interactive JavaScript Keyboard Event Viewer

Keycode Info is a free online keyboard event tester designed for JavaScript developers, web developers, and UI designers. It allows you to immediately read the values ​​of properties generated by the browser when pressing any key on the keyboard, facilitating the implementation of keyboard shortcuts, browser game controls and form validation.

Understanding keyboard events in web browsers

In JavaScript, keyboard support is based on three main events: keydown, keypress, and keyup. The keydown event is triggered when a key is pressed, keypress (now obsolete) involved generating a text character, and keyup occurs when the key is released. Each of these events creates a KeyboardEvent object that contains detailed properties about the pressed button. Our interactive tester allows you to observe these events on the fly and read their exact parameters without the need to write test code or look into the browser's development console.

Using the tool is very simple. Just click on the active area of ​​the page and press any key or key combination on the keyboard. The tool will immediately present the values ​​of the most important fields of the event object, such as key, code, keyCode, which, as well as the states of the modifier keys, which include Shift, Control, Alt and the Meta key (Windows / Command on macOS).

Differences between event.key, event.code and the deprecated event.keyCode

In the past, developers commonly used the event.keyCode (or event.which) property to identify keys. This property returned the numeric code of the key (e.g. 13 for the Enter key, 27 for Escape). However, this solution had a serious drawback - these codes differed depending on the browser and the user's keyboard layout. For this reason, the W3C organization has deemed these properties deprecated and recommends the use of modern equivalents: event.key and event.code.

The event.key property returns the actual value of the character generated by pressing the key, taking into account the state of the Shift key and the keyboard layout (e.g. pressing "a" will return "a", and holding Shift will return "A"). In turn, event.code represents a physical key on the keyboard, regardless of the language layout or modifier state (e.g. the physical key "Q" in the QWERTY layout will always return "KeyQ", even if it corresponds to a different letter in the AZERTY layout). Our Keycode calculator presents both of these values ​​simultaneously, which allows you to understand the differences in their behavior and choose the right solution for your project.

The use of key detection in modern web development

Precise keyboard operation is essential when creating modern and accessible (WCAG) web applications. Keyboard shortcuts allow advanced users to navigate faster through CRM systems and online text editors. Detecting arrow keys or the popular WSAD layout is the foundation of HTML5 game programming. Our tester makes it easy to quickly map these keys and speed up the code writing process.

Frequently asked questions