Easily see the JavaScript Keyboard Event KeyCodes with keycode.info

Handy helper tool by Wes Bos: simply press any key and see the results for KeyboardEvent.which, KeyboardEvent.key,KeyboardEvent.code, etc. As a user with an AZERTY keyboard layout I often have a broken experience on sites that respond to first row of keys, e.g. QWERTY. As those sites respond to KeyboardEvent.key — which differs from layout to […]


This content originally appeared on Bram.us and was authored by Bramus!

Handy helper tool by Wes Bos: simply press any key and see the results for KeyboardEvent.which, KeyboardEvent.key,KeyboardEvent.code, etc.

As a user with an AZERTY keyboard layout I often have a broken experience on sites that respond to first row of keys, e.g. QWERTY. As those sites respond to KeyboardEvent.key — which differs from layout to layout — I cannot simply use the first row, but have to reach for the Q and W keys on the second and third row.

To properly implement key presses independent of the keyboard layout, it’s recommended to use e.keyCode as that will yield the same keyCode. As per MDN:

The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value that isn’t altered by keyboard layout or the state of the modifier keys.

For example: pressing A on AZERTY will yield KeyQ. Pressing Q on QWERTY will also yield KeyQ as they’re the same physical key.

JavaScript Event KeyCodes →


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-02-11T12:11:10+00:00) Easily see the JavaScript Keyboard Event KeyCodes with keycode.info. Retrieved from https://www.scien.cx/2021/02/11/easily-see-the-javascript-keyboard-event-keycodes-with-keycode-info/

MLA
" » Easily see the JavaScript Keyboard Event KeyCodes with keycode.info." Bramus! | Sciencx - Thursday February 11, 2021, https://www.scien.cx/2021/02/11/easily-see-the-javascript-keyboard-event-keycodes-with-keycode-info/
HARVARD
Bramus! | Sciencx Thursday February 11, 2021 » Easily see the JavaScript Keyboard Event KeyCodes with keycode.info., viewed ,<https://www.scien.cx/2021/02/11/easily-see-the-javascript-keyboard-event-keycodes-with-keycode-info/>
VANCOUVER
Bramus! | Sciencx - » Easily see the JavaScript Keyboard Event KeyCodes with keycode.info. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/11/easily-see-the-javascript-keyboard-event-keycodes-with-keycode-info/
CHICAGO
" » Easily see the JavaScript Keyboard Event KeyCodes with keycode.info." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/02/11/easily-see-the-javascript-keyboard-event-keycodes-with-keycode-info/
IEEE
" » Easily see the JavaScript Keyboard Event KeyCodes with keycode.info." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/02/11/easily-see-the-javascript-keyboard-event-keycodes-with-keycode-info/. [Accessed: ]
rf:citation
» Easily see the JavaScript Keyboard Event KeyCodes with keycode.info | Bramus! | Sciencx | https://www.scien.cx/2021/02/11/easily-see-the-javascript-keyboard-event-keycodes-with-keycode-info/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.