Francisco Chaves

Software Developer.
Chatbot Developer.

Modo escuro

Código da tecla pressionada em JavaScript

25 de janeiro de 2021

Dicas
JavaScript

Olá pessoal, sabia que podemos capturar a tecla pressionada como a linguagem JavaScript? Então hoje vamos aprender como fazer isso.

Para obter o valor e o código da tecla pressionada em qualquer local no documento HTML, podemos utilizar o código JavaScript abaixo, que utiliza o evento keypress:

document.body.addEventListener('keypress', function (event) {
  const key = event.key;
  const code = event.keyCode;
  console.log(`Key: ${key}, Code ${code}`);
});

Outra forma de realizar a captura do código e valor da tecla é utilizando o evento keydown:

document.body.addEventListener('keydown', function (event) {
  const key = event.key;
  const code = event.keyCode;
  console.log(`Key: ${key}, Code ${code}`);
});

A diferença entre as duas formas apresentadas, é que o evento keypress dispara somente se a teclas produzir valor do tipo caractere, já o evento keydown dispara mesmo se a tecla não produzir valor de caractere, veja alguns exemplos de teclas que não produz valor do tipo caractere: