Эта статья связана с обработкой событий в 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
— название клавиши.KeyS
,KeyZ
,KeyU
и т.д.altKey
—true
илиfalse
, была ли одновременно нажата/отпущена клавиша AltctrlKey
—true
илиfalse
, была ли одновременно нажата/отпущена клавиша CtrlshiftKey
—true
илиfalse
, была ли одновременно нажата/отпущена клавиша ShiftmetaKey
—true
илиfalse
, была ли одновременно нажата/отпущена так называемая мета-клавиша (на Mac клавиатурах это ⌘ Command, а в Windows клавиатурах — Windows key ⊞)— код нажатой клавиши.keyCode
83
,90
,85
и т.д.
key
возвращает символьное представление клавиши. Другими словами, если эта клавиша печатает какой-то символ, то key
будет содержать его. В случае, если нажата управляющая клавиша (Shift, Ctrl и т.д.), key
вернёт название этой клавиши.
code
же возвращает название клавиши в контексте её физического положения на клавиатуре. Например, если взять стандартную русско-английскую QWERTY клавиатуру и нажать в русской раскладке q
, key
будет q
, а code
— KeyQ
. Если переключить раскладку на английский и нажать ту же клавишу, то key
поменяется на й
, а вот code
так и останется KeyQ
. Также code
даёт больше информации положении парных клавиш. Если нажать левый Shift, то key
будет содержать просто Shift
, зато code
вернёт — ShiftLeft
.
Благодаря этим свойствам, code
удобно использовать, например для управления клавиатурой в играх, когда есть необходимость задать определённым клавишам нужные действия независимо от языка раскладки.
Если подытожить, то key
говорит нам, какой символ будет напечатан, а code
— название этой клавиши на клавиатуре независимо от текущего языка ввода.
Пример Keydown
Секция статьи "Пример Keydown"При нажатии на любую клавишу в демо ниже, будет срабатывать событие keydown
, которое будет выводить подсказку о нажатых клавишах:
Пример Keyup
Секция статьи "Пример Keyup"Следующее демо будет сохранять цвет до тех пор, пока не будет зафиксировано событие keyup
на клавише Shift.
Событие keydown
выполняется бесконечное множество раз, до тех пор, пока клавиша будет зажата. Событие keyup
будет выполнено только один раз — в момент, когда пользователь отпустит клавишу
На практике
Секция статьи "На практике"🛠 События помогут добавить горячие клавиши на сайт. Например, открывать меню по комбинации клавиш или скрывать окна по кнопке Esc.
🛠 Существует похожее событие keypress
, оно устаревшее. Вместо него нужно использовать keydown