keydown
Событие keydown срабатывает, когда клавиша была нажата.
В отличии от события keypress (en-US), событие 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 (en-US) всякий раз, когда вы нажимаете клавишу внутри <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