keydown
Событие 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