Keyboard events
New Course Coming Soon:
Get Really Good at Git
Discover the basics of working with keyboard events in JavaScript
There are 3 types of events when interacting with keyboard events:
keydown
the keyboard key has been pressedkeyup
the keyboard key has been released
keydown
is also fired when the key repeats while the button stays pressed.
While mouse and touch events are typically listened on a specific element, it’s common to listen for keyboard events on the document:
document.addEventListener('keydown', (event) => {
// key pressed
})
The parameter passed to the event listener is a KeyboardEvent.
This event object, in addition to the Event object properties offers us (among others) these unique properties:
altKey
true if alt key was pressed when the event was firedcode
the code of the key pressed, returned as a stringctrlKey
true if ctrl key was pressed when the event was firedkey
the value of the key pressed, returned as a stringlocale
the keyboard locale valuelocation
the location of the key on the keyboardmetaKey
true if meta key was pressed when the event was firedrepeat
true if the key has been repeated (e.g. the key has not been released)shiftKey
true if shift key was pressed when the event was fired
This demo is a keylogger which will show you the values of some of the properties I listed above: https://codepen.io/flaviocopes/pen/LopWmq/
→ Read my DOM Tutorial on
The Valley of Code
→ Read my
Browser Events Tutorial
on The Valley of Code
→ Read my
Browser APIs Tutorials
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X