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>
элемента.
<input placeholder="Кликните здесь, затем нажмите клавишу." size="40" />
<p id="log"></p>
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("keydown", logKey);
function logKey(e) {
log.textContent += ` ${e.code}`;
}
Аналог onkeydown
input.onkeydown = logKey;
Спецификации
Specification |
---|
UI Events # event-type-keydown |
HTML Standard # handler-onkeydown |
Совместимость с браузерами
BCD tables only load in the browser