Código da tecla pressionada em 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}`);
});
Copy

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}`);
});
Copy

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:

• Shift;
• Tab;
• CapsLock;
• Alt;
• Backspace;
• ArrowRight;
• ArrowDown;
• ArrowUp; e
• ArrowLeft.

Veja abaixo um exemplo de um projeto em execução:

Código do projeto no Github: https://github.com/franciscojsc/keycode.

Valeu pessoal 😎✌!!!

Referências

Keydown - APIs Da Web | MDN. MDN Web Docs. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/API/Document/keydown_event. Acesso em: 24 jan. 2021.

Keypress - APIs Da Web | MDN. MDN Web Docs. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/API/Document/keypress_event. Acesso em: 24 jan. 2021.

#Compartilhe