keydown

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Событие keydown срабатывает, когда клавиша была нажата.

В отличии от события keypress, событие keydown срабатывает на всех клавишах, независимо от того, есть ли у них значение.

Bubbles Yes
Cancelable Yes
Interface KeyboardEvent
Event handler property onkeydown

События keydown и keyup показывают то, что клавиша была нажата, в то время как keypress показывает то, какой символ был введён. Например, прописную "a" keydown и keyup сообщат как 65, а keypress сообщит как 97. Заглавную же "A" все события сообщают как 65.

События клавиатуры генерируются только в <inputs>, <textarea> и любых элементах с атрибутом contentEditable или tabindex="-1".

Примеры

Примеры addEventListener keydown

Этот пример отображает значение KeyboardEvent.code всякий раз, когда вы нажимаете клавишу внутри <input> элемента.

html
<input placeholder="Кликните здесь, затем нажмите клавишу." size="40" />
<p id="log"></p>
js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keydown", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

Аналог onkeydown

js
input.onkeydown = logKey;

Спецификации

Specification
UI Events
# event-type-keydown
HTML Standard
# handler-onkeydown

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также