Artigo original: JavaScript Keycode List – Keypress Event Key Codes for Enter, Space, Backspace, and More

Os eventos de teclado em Javascript ajudam a capturar interações do usuário com o teclado.

Da mesma forma que em muitos outros eventos do Javascript, a interface do KeyboardEvent nos fornece todas as propriedades e métodos necessários para lidar com cada tecla pressionada pelo usuário.

Existem diversos artigos sobre como este método funciona e sobre como utilizá-lo. Ao mesmo tempo, a w3.org (texto em inglês) continua a atualizar as especificações, adicionando novas propriedades e removendo algumas existentes, marcando alguns códigos como legado.

Por conta disso, é essencial que os desenvolvedores da web tenham o hábito da aprendizagem contínua com relação à interface KeyboardEvent para saberem o que exatamente eles devem utilizar e o que não é mais relevante.

Neste artigo, vamos aprender sobre:

• A interface KeyboardEvent.
• Os tipos de eventos de teclado que devemos ter em mente.
• Os tipos de eventos de teclado que talvez nunca utilizaremos.
• As propriedades que são necessárias na prática e como diferentes navegadores lidam com elas.
• O que já não é mais usado e o que ainda está em uso.
• Um exercício prático para tentarmos fazer as coisas à medida que aprendemos.
• Por fim, a lista atual de códigos de teclas para referência e uso no futuro.

Espero que você aproveite.

A interface KeyboardEvent e os tipos de eventos

A interface de tecla (KeyboardEvent) fornece informações usando as constantes definidas, propriedades e um método único (neste momento). Ela é uma extensão da interface UIEvent, a qual, por sua vez, é uma extensão da interface Event.

Existem três tipos de eventos, primordialmente: keydown, keypress e keyup. Podemos obter informações contextual destes eventos a partir das propriedades e métodos da interface KeyboardEvent.

Você pode adicionar cada um destes eventos a um elemento HTML ou a um objeto document utilizando o método addEventListener. Segue um exemplo de listener do evento keydown onde o id é 'digite-aqui':

let elem = document.getElementById('digite-aqui');

elem.addEventListener("keydown", function (event) {
    // O evento do parâmetro é do tipo KeyboardEvent
  	addRow(event);
});

Como alternativa, você pode os métodos de tratamento, como onKeydown(event), onKeyup(event), onKeypress(event), com o elemento para tratar dos eventos de teclado. Abaixo, vemos um exemplo de como lidar com um evento de keyup em um elemento de input:

<input type="text" id="digite-aqui" onkeyup="façaAlgo(event)">

Se você imprimir no console do navegador o objeto event, verá todas as propriedades e métodos junto com aqueles que ele herda das interfaces.

Experimente esse evento interativo no exercício

Antes de avançarmos, que tal um exercício para explorarmos todos os eventos de teclado, suas propriedades, características e assim por diante? Acredito que será ótimo utilizá-lo juntamente com este artigo e posteriormente.

Você precisa apenas colocar seu cursor em qualquer lugar do aplicativo incorporado abaixo e pressionar qualquer tecla para ver a informação contextual sobre ela.

Você também pode filtrar os eventos, desmarcando-os nas caixas de seleções que estão na parte superior. Experimente:

Se tiver quaisquer problemas acessando o exercício acima, pode acessar a ferramenta diretamente por este link: https://keyevents.netlify.app/

Você também pode encontrar o código-fonte da demonstração aqui: https://github.com/atapas/js-keyevents-demo

keydown, keypress, keyup – qual você deve usar?

O eventos de tecla são:

• keydown: dispara quando qualquer tecla é pressionada.
• keypress: dispara quando uma tecla que retorna um valor de caractere é pressionada. Por exemplo, se você pressionar a tela a, este evento vai disparar a letra a, que retorna o valor 97. Por outro lado, este evento não vai funcionar quando pressionar a tecla shift pois ela não retorna um valor.
• keyup: dispara quando qualquer tecla é liberada.

Se todos os eventos estão vinculados a um elemento do DOM, a ordem de funcionamento seria:

1. Primeiro,  keydown
2. Depois, pressione (com a condição de estado acima)
3. Por último, keyup

Entre estes eventos, o mais utilizado é (ou deveria ser) keydown, pois:

• O evento keydown tem uma cobertura máxima de contextualização de informação. O evento keypress funciona apenas com um subconjunto de teclas. Você não consegue capturar Alt, Ctrl, Shift, Meta e outras eventos de teclas similares com keypress. Isto também significa que não podemos disparar eventos com a combinação de teclas como Ctrl+Z, Shift+Tab e assim por diante.
• Além disso, o evento keypress já não deve mais ser utilizado. Isto é o suficiente para evitá-lo.
• Embora os eventos keydown e keyup tratem de todas as teclas e muitos navegadores oferecem suporte a eles, existem algumas diferenças que deixam o keydown a frente de keyup. O evento keydown dispara antes do navegador processar a tecla. Se você cancelar o evento keydown (digo, utilizando event.preventDefault()) a ação do navegador também será cancelada. No caso do evento keyup, a ação dos navegadores não será cancelada mesmo que você cancele o evento.

No exemplo abaixo, utilizamos  event.preventDefault() ao disparar os eventos keydown e keyup. A ação do navegador escreve o caractere dentro da caixa de texto isso não vai acontecer no caso do evento keydown, mas acontecerá no evento de keyup.

Depois desta explicação, vemos que o evento keydown é claramente o vencedor e deve ser tornar o tipo de evento mais popular (mais usado).

Como utilizar as propriedades dos eventos de tecla pressionada na prática

Esta é a pergunta mais importante! A resposta mais curta é: depende. Mas de quê? Depende de:

• Qual o nível de suporte do navegador para a sua aplicação
• O quanto o código da sua aplicação é antigo e o quanto você está disposto a refatorar?

Antes de chegarmos nisso, contudo,  vamos ver um pouco sobre propriedades e métodos úteis da interface keyboardEvent.

As últimas três propriedades foram descontinuadas e deve-se utilizar a propriedade key no lugar delas. A propriedade key possui um suporte mais amplo dos navegadores (texto em inglês).

Encontramos suporte nos seguintes navegadores:

• Microsoft Edge: Versão >= 79
• Firefox: Versão >= 29
• Google Chrome: Versão >= 51
• Safari: Versão >= 10.1

Então, enquanto você não estiver utilizando nenhuma versão antiga de navegadores, a propriedade event.key deve ser o suficiente para identificar uma tecla. Caso você tenha que fornecer suporte a navegadores antigos, a melhor saída seria a propriedade event.which.

window.addEventListener("keydown", function (event) {
  
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key
  } else if (event.which !== undefined) {
    // Handle the event with KeyboardEvent.which
  }
});

Se o seu código possui propriedades descontinuadas e se você tiver a oportunidade de refatorar este código, sempre será melhor a fazer.

Teclas modificadoras

As teclas modificadoras são as teclas especiais do seu teclado que mudam o comportamento padrão de outras teclas. Control, Shift e Alt são algumas das teclas modificadoras. Quando uma tecla modificadora é combinada com outra tecla, você pode esperar que uma ação diferente ocorra.

Por exemplo, se você apertar a tecla z, deve retornar a letra e o código dela. Se você combinar com o modificador Control e pressionar Control+z, provavelmente terá a ação de desfazer a operação. Vamos ver isto com mais alguns exemplos na próxima seção.

As propriedades, event.altKey, event.ctrlKey, event.shiftKey e outras ajudam a  identificar qual modificador foi pressionado.

Combinação de teclas

Podemos combinar diversas teclas e realizar ações baseadas na combinação delas. O código abaixo mostra como combinar Control e z para definir uma ação:

document
  .getElementById("to_focus")
  .addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.key === "z") {
      // Realiza uma ação, talvez até a operação de 'desfazer'
    }
});

Segue outro exemplo de combinação de teclas. Experimente:

Lista Completa de valores de eventos de teclado

A tabela abaixo mostra a lista de teclas com os valores de event.which, event.key e event.code.

Observe:

• event.which foi descontinuado (ou desatualizado)
• O valor de event.code é o mesmo para letras minúsculas e maiúsculas. No entanto, o valor de event.key representa a letra de fato.
• O valor de event.which é diferente no Firefox(FF) e em outros navegadores para as teclas: equal(=), semicolon(;), edash/minus(-)

E quanto ao teclado virtual?

E quanto ao teclado virtual que utilizamos em nosso celular ou tablet ou qualquer outro dispositivo?

As especificações dizem que o teclado virtual possui o mesmo layout e funcionalidade que um teclado padrão. Assim, ele deverá retornar um atributo adequado. Caso contrário, não retornará o valor correto.

Em resumo

Para resumir:

• Você pode utilizar o KeyboardEvent para capturar as interações do usuário utilizando um teclado.
• Existem três eventos primários: keydown, keypress, ekeyup.
• Devemos utilizar o tipo de evento keydown quando possível, pois ele é o suficiente para a maioria dos casos de uso do usuário.
• O tipo de evento keypress foi descontinuado.
• A propriedade event.which foi descontinuada. Utilize event.key sempre que possível.
• Se tiver que fornecer suporte para um navegador mais antigo, utilize o fallback apropriado para detectar a tecla.
• Podemos combinar várias teclas para realizar operações.
• O teclado virtual possui suporte para estes eventos desde que o layout e as funções sejam similares às de um teclado padrão.

Isto é tudo por agora. Obrigado por ler até aqui! Entre em contato com o autor. Você pode entrar em contato com ele (@tapasadhikary) e fazer comentários ou fique à vontade para segui-lo no Twitter .