skip to main content

Element.Keydown/Keyup

js

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

Кратко 🔗

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

на нажатие срабатывает keydown, на отпускание keyup

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

Как пишется 🔗

keydown 🔗

const spy = document.getElementById("keyboardSpy")

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

keyup 🔗

const spy = document.getElementById("keyboardSpy")

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

Как понять 🔗

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

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

Пример Keydown 🔗

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

See the Pen Событие keydown by Stegur (@Stegur) on CodePen.

Пример Keyup 🔗

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

See the Pen Keyup by Stegur (@Stegur) on CodePen.

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

В работе 🔗

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

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