Blog · Dicas & Tutoriais · Javascript · Web

Obtendo as teclas que estão sendo pressionadas ao mesmo tempo com Javascript e jQuery

Ouvindo as teclas pressionadas no navegador - Javascript JS e jQuery

Quem trabalha com desenvolvimento Web pode ter se deparado com a situação de precisar implementar algum comando via teclado, em estilo teclas de atalho, seja para recurso de acessibilidade ou para uma simples aplicação Web. Isso é possível, é fácil e basta algumas linhas de código Javascript.

Experimentando pela primeira vez o CodePen, resolvi escrever um tutorial simples a fim de explicar como implementar essa funcionalidade, com algumas poucas linhas de código. No exemplo uso a bilbioteca jQuery, além do JavaScript.

Abaixo o exemplo: para testar, dê foco clicando na parte do HTML (“Keys pressed”) e pressione algumas teclas do seu teclado, simultaneamente.

Repare que tudo é basicamente gerenciado usando dois métodos para ouvir os eventos de tecla pressionada (keydown) e solta (keyup). As teclas pressionadas ficam armazenadas num objeto, keys, em valores da tabela ASCII – a letra “a”, por exemplo, é 65 em ASCII. Ambos chamam um outro método, updateKeys, que irá exibir o resultado no código HTML. Ele itera em keys e passa para um lista. Se você quiser transformar o código ASCII em letra, converta usando o método String.fromCharCode.

See the Pen Getting the keyboard keys pressed at same time by Francisco Prado (@rodricks87) on CodePen.

 

Usei o jQuery para facilitar o trabalho, mas é muito fácil de se reproduzir o mesmo com JS puro.

Muito simples, né? Espero que seja útil a alguém. Até 🙂

 


Curtiu? Então aperte o botão:
Tagged: , , , , , , , ,