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

Откройте для себя основы работы с событиями клавиатуры в JavaScript

При взаимодействии с событиями клавиатуры существует 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.

Tech Wiki Online!