JavaScript | Событие ‘keydown’

Как узнать какая клавиша (кнопка) на клавиатуре была нажата на HTML-странице при помощи JavaScript?

Само слово ‘keydown‘ обозначает именно нажатие. То есть событие на клиенте (в браузере) срабатывает в тот момент, когда фактически клавиша клавиатуры опустилась вниз.

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

Чтобы узнать на какую клавишу нажал пользователь в браузере, нужно создать слушатель события ‘keydown‘.

Как создать слушатель события ‘keydown‘ при помощи JavaScript?

Если нас интересует общее нажатие всех клавиш в документе, то нам нужно вешать слушатель события на весь документ. Выглядеть это будет так:

document.addEventListener('keydown', function(event){
   console.log(event)
})

Мы используем метод addEventListener(), который принимает два параметра:

Строковое название типа события
Функцию-обработчик, которая принимает объект события

Нажали кнопки вверх и вниз в браузере и перехватили событие - JavaScript — Нажали кнопки вверх и вниз в браузере и перехватили событие — JavaScript

Теперь у нас есть объект события нажатия клавиши, из которого мы можем получить нужный нам параметр. Нам подходят ключи (актуально на август 2023 года):

code: «ArrowDown»
key: «ArrowDown»
keyCode: 40

После этого мы можем писать логику обработки какой-то конкретной клавиши в нашей функции обработчике.

Информационные ссылки

Типы событий пользовательского интерфейса KeyboardEvent

W3C — Keyboard Events — https://www.w3.org/TR/uievents/#events-keyboardevents