В этом руководстве вы узнаете, как работать с событиями клавиатуры JavaScript, включая keydown,keypress и keyup, их свойства.
Когда вы взаимодействуете с клавиатурой, запускаются события клавиатуры. Существует три основных события клавиатуры:
keydown— срабатывает, когда вы нажимаете клавишу на клавиатуре, и повторяется, пока вы удерживаете клавишу.keyup— срабатывает, когда вы отпускаете клавишу на клавиатуре.keypress— срабатывает, когда вы нажимаете символьную клавиатуру, напримерa,bилиc, а не клавишу со стрелкой влево, домашнюю или конечную клавиатуру…keypressтакже срабатывает многократно, пока вы удерживаете клавишу на клавиатуре.
События клавиатуры обычно запускаются в текстовом поле через все элементы, которые их поддерживают.
Когда вы один раз нажимаете символьную клавишу на клавиатуре, запускаются три события клавиатуры в следующем порядке:
keydownkeypresskeyup
Как события keydown keypress, так и события нажатия клавиши запускаются перед любым изменением, внесенным в текстовое поле, тогда как keyupзапускается после внесения изменений в текстовое поле. Если вы удерживаете нажатой символьную клавишу, keydown клавиши и ее keypress повторяются до тех пор, пока вы не отпустите клавишу.
Когда вы нажимаете несимвольную клавишу, сначала keydown событие нажатия клавиши, а затем keyup нажатия клавиши. Если вы удерживаете нажатой клавишу, не являющуюся символом, keydown клавиши срабатывает неоднократно, пока вы не отпустите ее.
Обработка событий клавиатуры
Чтобы обработать событие клавиатуры, выполните следующие действия:
- Сначала выберите элемент, для которого будет срабатывать событие клавиатуры. Как правило, это текстовое поле.
- Затем используйте
element.addEventListener()для регистрации обработчика событий.
Предположим, что у вас есть следующее текстовое поле с идентификатором message :
<input type="text" id="message">
Ниже показано, как зарегистрировать прослушиватели событий клавиатуры:
let msg = document.getDocumentById('#message');
msg.addEventListener("keydown",(event) => {
// handle keydown
});
msg.addEventListener("keypress",(event) => {
// handle keypress
});
msg.addEventListener("keyup",(event) => {
// handle keyup
});Если вы нажмете символьную клавишу, будут вызваны все три обработчика событий.
Свойства
Событие клавиатуры имеет два важных свойства: key и code. Свойство key возвращает нажатый символ, тогда как свойство code возвращает код физической клавиши.
Например, если вы нажмете символьную клавишу z, event.key вернет z, а event.code вернет KeyZ.
См. следующий пример:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Keyboard Events: Key/Code</title>
</head>
<body>
<input type="text" id="message">
<script>
let textBox = document.getElementById('message');
textBox.addEventListener('keydown', (event) => {
console.log(`key=${event.key},code=${event.code}`);
});
</script>
</body>
</html>Если вы наберете символ z, вы увидите следующее сообщение:
key=z,code=KeyZ
Как это работает:
- Сначала выберите текстовое поле с
messageидентификатора с помощью методаgetElementById(). - Затем зарегистрируйте
keydownсобытий нажатия клавиш и зарегистрируйте клавишу и код нажатой клавиши.
Заключение
- Когда вы нажимаете символьную клавишу на клавиатуре, последовательно запускаются события
keydown,keypressиkeyup. Однако, если вы нажмете несимвольную клавишу, сработают только событияkeydownиkeyup. - Объект
eventклавиатуры имеет два важных свойства: свойстваkeyиcode, которые позволяют определить, какая клавиша была нажата. - Свойство
keyвозвращает значениеkeyклавиши, в то время какcodeпредставляет собой физическую клавишу на клавиатуре.