События keydown и keyup

Время чтения: меньше 5 мин

Эта статья связана с обработкой событий в JavaScript. Зачем нужны события и как с ними работать читайте в статье События.

Кратко

Секция статьи "Кратко"

События на HTML-элементе. Когда пользователь нажимает на клавишу клавиатуры, происходит событие keydown, как только пользователь отпустил клавишу — произойдёт событие keyup.

Событие keydown фиксирует момент нажатия клавиши, до того как эта клавиша будет отпущена, что, по сути, является первой фазой нажатия. Продолжением является событие keyup — момент, когда клавиша будет отпущена.

Как пишется

Секция статьи "Как пишется"

keydown

Секция статьи "keydown"
        
          
          const spy = document.getElementById("keyboardSpy")spy.addEventListener("keydown", function (event) {  alert("Нажата клавиша " + event.key)})
          const spy = document.getElementById("keyboardSpy")

spy.addEventListener("keydown", function (event) {
  alert("Нажата клавиша " + event.key)
})

        
        
          
        
      

keyup

Секция статьи "keyup"
        
          
          const spy = document.getElementById("keyboardSpy")spy.addEventListener("keyup", function (event) {  alert("Клавиша " + event.key + " отпущена")})
          const spy = document.getElementById("keyboardSpy")

spy.addEventListener("keyup", function (event) {
  alert("Клавиша " + event.key + " отпущена")
})

        
        
          
        
      

Как понять

Секция статьи "Как понять"

В функцию-обработчик также передаётся объект события, в котором есть информация о нажатой кнопке:

  • key — символьное значение. sЯ , U и т.д.
  • code — название клавиши. KeySKeyZKeyU и т.д.
  • altKey — true или false, была ли одновременно нажата/отпущена клавиша Alt
  • ctrlKeytrue или false, была ли одновременно нажата/отпущена клавиша Ctrl
  • shiftKey — true или false, была ли одновременно нажата/отпущена клавиша Shift
  • metaKeytrue или false, была ли одновременно нажата/отпущена так называемая мета-клавиша (на Mac клавиатурах это ⌘ Command, а в Windows клавиатурах — Windows key )
  • keyCode — код нажатой клавиши. 83, 90, 85 и т.д.

key возвращает символьное представление клавиши. Другими словами, если эта клавиша печатает какой-то символ, то key будет содержать его. В случае, если нажата управляющая клавиша (Shift, Ctrl и т.д.), key вернёт название этой клавиши.

code же возвращает название клавиши в контексте её физического положения на клавиатуре. Например, если взять стандартную русско-английскую QWERTY клавиатуру и нажать в русской раскладке q/й, key будет q, а codeKeyQ. Если переключить раскладку на английский и нажать ту же клавишу, то key поменяется на й, а вот code так и останется KeyQ. Также code даёт больше информации положении парных клавиш. Если нажать левый Shift, то key будет содержать просто Shift, зато code вернёт — ShiftLeft.

Благодаря этим свойствам, code удобно использовать, например для управления клавиатурой в играх, когда есть необходимость задать определённым клавишам нужные действия независимо от языка раскладки.

Если подытожить, то key говорит нам, какой символ будет напечатан, а codeназвание этой клавиши на клавиатуре независимо от текущего языка ввода.

Пример Keydown

Секция статьи "Пример Keydown"

При нажатии на любую клавишу в демо ниже, будет срабатывать событие keydown, которое будет выводить подсказку о нажатых клавишах:

Открыть демо в новой вкладке

Пример Keyup

Секция статьи "Пример Keyup"

Следующее демо будет сохранять цвет до тех пор, пока не будет зафиксировано событие keyup на клавише Shift.

Открыть демо в новой вкладке

Событие keydown выполняется бесконечное множество раз, до тех пор, пока клавиша будет зажата. Событие keyup будет выполнено только один раз — в момент, когда пользователь отпустит клавишу

На практике

Секция статьи "На практике"

Алекс Стегура

Секция статьи "Алекс Стегура"

🛠 События помогут добавить горячие клавиши на сайт. Например, открывать меню по комбинации клавиш или скрывать окна по кнопке Esc.

🛠 Существует похожее событие keypress, оно устаревшее. Вместо него нужно использовать keydown