In the previous lesson we’ve seen how to handle mouse and touch events.
Let’s now dive into keyboard events.
There are 3 types of events when interacting with keyboard events:
keydownthe keyboard key has been pressedkeyupthe 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:
altKeytrue if alt key was pressed when the event was firedcodethe code of the key pressed, returned as a stringctrlKeytrue if ctrl key was pressed when the event was firedkeythe value of the key pressed, returned as a stringlocalethe keyboard locale valuelocationthe location of the key on the keyboardmetaKeytrue if meta key was pressed when the event was firedrepeattrue if the key has been repeated (e.g. the key has not been released)shiftKeytrue if shift key was pressed when the event was fired
The demo is a keylogger which will show you the values of some of the properties I listed above.
I made a video of building it:
Click inside the demo and type something:
See the Pen Key logger demo by Flavio Copes (@flaviocopes) on CodePen.