События клавиатуры

При взаимодействии с событиями клавиатуры существует 3 типа событий:

• keydownклавиша клавиатуры была нажата
• keyupклавиша клавиатуры была отпущена

keydownтакже срабатывает, когда клавиша повторяется, пока кнопкаостаетсянажал.

Хотя события мыши и касания обычно прослушиваются на определенном элементе, обычно прослушивание событий клавиатуры выполняется надокумент:

document.addEventListener('keydown', event => {
  // key pressed
})

Параметр, передаваемый прослушивателю событий, являетсяKeyboardEvent.

Этот объект события в дополнение кСвойства объекта событияпредлагает нам (среди прочего) эти уникальные свойства:

• altKeyистина, если клавиша alt была нажата при срабатывании события
• codeкод нажатой клавиши, возвращенный в виде строки
• ctrlKeyистина, если клавиша ctrl была нажата при срабатывании события
• keyзначение нажатой клавиши, возвращенное в виде строки
• localeзначение языкового стандарта клавиатуры
• locationврасположение ключана клавиатуре
• metaKeyистина, если мета-клавиша была нажата при срабатывании события
• repeatистина, если ключ был повторен (например, ключ не был отпущен)
• shiftKeyистина, если клавиша Shift была нажата, когда событие было запущено

Эта демонстрация представляет собой кейлоггер, который покажет вам значения некоторых свойств, которые я перечислил выше:

См. ПероДемонстрация кейлоггераАвтор: Флавио Коупс (@flaviocopes) наCodePen.