Resumo : neste tutorial, você aprenderá como trabalhar com eventos de teclado JavaScript, incluindo keydown, keypresse keyup.
Introdução aos eventos de teclado JavaScript
Quando você interage com o teclado, os eventos do teclado são acionados. Existem três eventos principais de teclado:
keydown– dispara quando você pressiona uma tecla no teclado e dispara repetidamente enquanto você mantém a tecla pressionada.keyup– dispara quando você solta uma tecla do teclado.keypress– é acionado quando você pressiona um teclado de caracteres comoa,b, ouc, não a tecla de seta para a esquerda, o teclado inicial ou final, … Okeypresstambém é acionado repetidamente enquanto você mantém pressionada a tecla no teclado.
Os eventos de teclado normalmente são acionados na caixa de texto, embora todos os elementos os suportem.
Quando você pressiona uma tecla de caractere uma vez no teclado, três eventos de teclado são acionados na seguinte ordem:
keydownkeypresskeyup
Ambos os eventos keydowne keypresssão acionados antes de qualquer alteração ser feita na caixa de texto, enquanto o evento keyup é acionado após as alterações serem feitas na caixa de texto. Se você mantiver pressionada uma tecla de caractere, os keydowne keypressserão acionados repetidamente até que você solte a tecla.
Quando você pressiona uma tecla que não seja um caractere, o keydownevento é acionado primeiro, seguido pelo keyupevento. Se você mantiver pressionada a tecla sem caractere, o comando keydownserá disparado repetidamente até que você solte a tecla.
Manipulando eventos de teclado
Para lidar com um evento de teclado, siga estas etapas:
- Primeiro, selecione o elemento no qual o evento de teclado será acionado. Normalmente, é uma caixa de texto.
- Em seguida, use o
element.addEventListener()para registrar um manipulador de eventos.
Suponha que você tenha a seguinte caixa de texto com o id message:
<input type="text" id="message">Linguagem de código: HTML, XML ( xml )Veja a seguir como registrar ouvintes de eventos de teclado:
let msg = document.getDocumentById('#message');
msg.addEventListener("keydown", (event) => {
// handle keydown
});
msg.addEventListener("keypress", (event) => {
// handle keypress
});
msg.addEventListener("keyup", (event) => {
// handle keyup
});Linguagem de código: PHP ( php )Se você pressionar uma tecla de caractere, todos os três manipuladores de eventos serão chamados.
As propriedades do evento de teclado
O evento de teclado tem duas propriedades importantes: keye code. A keypropriedade retorna o caractere que foi pressionado, enquanto a codepropriedade retorna o código da chave física.
Por exemplo, se você pressionar a ztecla do caractere, os event.keyretornos ze event.coderetornos KeyZ.
Veja o exemplo a seguir:
<!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>Linguagem de código: HTML, XML ( xml )Se você digitar character z, verá a seguinte mensagem:
key=z,code=KeyZComo funciona:
- Primeiro, selecione a caixa de texto com o id
messageusando ogetElementById()método. - Em seguida, registre um
keydownouvinte de evento e registre a chave e o código da tecla que foi pressionada.
Resumo
- Quando você pressiona uma tecla de caractere no teclado, os eventos
keydown,keypressekeyupsão acionados sequencialmente. No entanto, se você pressionar uma tecla que não seja um caractere, somente os eventoskeydownekeyupserão acionados. - O objeto teclado
eventpossui duas propriedades importantes:keyecodepropriedades que permitem detectar qual tecla foi pressionada. - A
keypropriedade retorna o valor dekeypressionado enquantocoderepresenta uma tecla física do teclado.
