Francisco Chaves

Francisco Chaves

Software Developer. Entusiasta Linux.

© 2021

Modo escuro

Código da tecla pressionada em JavaScript

logo

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:

  • 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

Recomendado para você