Resumo : neste tutorial, você aprenderá como trabalhar com eventos de teclado JavaScript, incluindo keydown
, keypress
e 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, … Okeypress
també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:
keydown
keypress
keyup
Ambos os eventos keydown
e keypress
sã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 keydown
e keypress
serão acionados repetidamente até que você solte a tecla.
Quando você pressiona uma tecla que não seja um caractere, o keydown
evento é acionado primeiro, seguido pelo keyup
evento. Se você mantiver pressionada a tecla sem caractere, o comando keydown
será 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: key
e code
. A key
propriedade retorna o caractere que foi pressionado, enquanto a code
propriedade retorna o código da chave física.
Por exemplo, se você pressionar a z
tecla do caractere, os event.key
retornos z
e event.code
retornos 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=KeyZ
Como funciona:
- Primeiro, selecione a caixa de texto com o id
message
usando ogetElementById()
método. - Em seguida, registre um
keydown
ouvinte 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
,keypress
ekeyup
são acionados sequencialmente. No entanto, se você pressionar uma tecla que não seja um caractere, somente os eventoskeydown
ekeyup
serão acionados. - O objeto teclado
event
possui duas propriedades importantes:key
ecode
propriedades que permitem detectar qual tecla foi pressionada. - A
key
propriedade retorna o valor dekey
pressionado enquantocode
representa uma tecla física do teclado.