Nas últimas versões do Chrome, foram feitas duas adições aos KeyboardEvents, que são usados como um parâmetro transmitido aos listeners de eventos keydown, keypress e keyup. O atributo code (adicionado no Chrome 48) e o atributo key (adicionado no Chrome 51) oferecem aos desenvolvedores uma maneira simples de receber informações que seriam difíceis de acessar usando atributos legados.
O atributo de código
Primeiro, o atributo code. Ele é definido como uma string que representa a tecla pressionada para gerar o KeyboardEvent, sem considerar o layout do teclado atual (por exemplo, QWERTY em vez de Dvorak), a localidade (por exemplo, inglês em vez de francês) ou qualquer tecla modificadora.
Isso é útil quando você quer saber qual tecla física foi pressionada, e não a qual caractere ela corresponde. Por exemplo, se você estiver escrevendo um jogo, talvez queira que um determinado conjunto de teclas mova o jogador em diferentes direções, e esse mapeamento precisa ser independente do layout do teclado.
O atributo da chave
Em seguida, temos o novo atributo key. Ele também é definido como uma string, mas enquanto code retorna informações sobre a tecla física que foi pressionada, key contém o caractere gerado por essa tecla, levando em conta o layout do teclado, a localidade e as teclas modificadoras atuais.
Analisar o valor do atributo key é útil quando você precisa saber qual caractere seria exibido na tela como se o usuário tivesse digitado uma entrada de texto.
O que isso significa na prática?
Para dar um exemplo concreto, vamos supor que o usuário esteja usando um teclado dos EUA com um layout QWERTY. Pressionar a tecla Q física nesse teclado resultará em um KeyboardEvent com um atributo code definido como "KeyQ". Isso é verdade independentemente do layout do teclado e de outras teclas modificadoras. Para efeito de comparação, em um teclado francês (AZERTY), essa tecla ainda teria um code de "KeyQ", mesmo que a letra impressa no botão seja um "a".
Pressionar a tecla Q física no mesmo teclado dos EUA geralmente gera um KeyboardEvent com key definido como "q" (sem teclas modificadoras), "Q" (com Shift ou CapsLock) ou "œ" (no OS X, com Alt). Em um teclado AZERTY francês, essa mesma tecla geraria um "a" (ou "A" com Shift ou CapsLock). E para outros layouts de teclado, o valor key pode ser "й", "ض", "ㅂ", "た" ou outro caractere.
Voltando ao exemplo de jogo anterior, se você quiser que o jogo use as teclas WASD para movimentação, use o atributo code e verifique "KeyW", "KeyA", "KeyS" e "KeyD". Isso funciona para todos os teclados e layouts, até mesmo para teclados AZERTY que trocam a posição das teclas "w" e "z".
Teclados virtuais
Até agora, nos concentramos no comportamento que pressupõe um teclado físico. E os usuários que estão digitando em um teclado virtual ou em um dispositivo de entrada alternativo? A especificação oferece orientações oficiais para o atributo code. Em resumo, um teclado virtual que imita o layout de um teclado padrão deve resultar na definição de um atributo code adequado, mas os teclados virtuais que adotam layouts não tradicionais podem resultar na não definição de code.
As coisas são mais simples para o atributo key, que deve ser definido como uma string com base no caractere que o usuário digitou (virtualmente).
Faça um teste
Gary Kačmarčík criou uma demonstração fantástica para visualizar todos os atributos associados a KeyboardEvents:
Suporte a vários navegadores
No momento em que este artigo foi escrito, o suporte para o atributo code estava limitado ao Chrome 48 ou mais recente, Opera 35 ou mais recente e Firefox 44 ou mais recente.
O atributo key tem suporte no Firefox 44 ou mais recente, Chrome 51 ou mais recente e Opera 38 ou mais recente, com suporte parcial no Internet Explorer 9 ou mais recente e Edge 13 ou mais recente.