Keyboard events

By Flavio Copes

Learn how to handle keyboard events in JavaScript with keydown and keyup on the document, and read the KeyboardEvent key, code, and modifier properties.

There are 3 types of events when interacting with keyboard events:

• keydown the keyboard key has been pressed
• keyup 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 fired
• code the code of the key pressed, returned as a string
• ctrlKey true if ctrl key was pressed when the event was fired
• key the value of the key pressed, returned as a string
• locale the keyboard locale value
• location the location of the key on the keyboard
• metaKey true if meta key was pressed when the event was fired
• repeat 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/

Related posts about platform: