Como Capturar a Tecla Digitada Pelo Usuário Com Javascript

Você sabia que é possível “pegar” a tecla digitada pelo usuário pelo Javascript?
Você pode criar comandos personalizados para sua aplicação de acordo com o que o usuário está digitando!

Com a evolução do Javascript, podemos reconhecer a tecla digitada pelo seu “nome”
Antes, tínhamos que reconhecer através de seu ID, hoje não é mais necessário isso!

No código abaixo, temos a representação de como conseguimos pegar a tecla digitada pelo usuário através do Javascript

1
2
3
node.addEventListener("keydown", (e) => {
alert(e.key);
});

Vamos imaginar um cenário onde queremos capturar a tecla “Enter”, em um textarea
Caso seja enter, deve chamar uma função.

1
2
3
4
5
6
7
8
9
10
11
12
13
<textarea rows="5" id="user-text"></textarea>;

// Primeiro pegamos o nosso input com javascript
const textarea = document.getElementById("user-text");

// Adicionamos nossa função para observar esse input
// e caso a tecla pressionada seja Enter
// chama a função "salvaFormulario"
textarea.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
salvaFormulario();
}
});

Com essa pequena quantidade de código, conseguimos reconhecer qual tecla está sendo digitada
E através disso, melhoramos a usabilidade, trazendo mais velocidade para o usuário, que agora
pode salvar suas informações teclando Enter!

É uma funcionalidade extremamente simples mas que quando bem usada, pode agregar muito em nossas aplicações!