As últimas versões do Chrome tiveram duas adições aos KeyboardEvents, que são usados como um parâmetro transmitido aos listeners de eventos keydown, keypress e keyup. Os atributos code (adicionados no Chrome 48) e key (adicionados no Chrome 51) oferecem aos desenvolvedores uma maneira simples de acessar informações que seriam difíceis em outros casos.
O atributo code
O primeiro é o atributo code. Isso é definido como uma string que representa a tecla que foi pressionada para gerar a KeyboardEvent, sem considerar o layout do teclado atual (por exemplo, QWERTY vs. Dvorak), a localidade (por exemplo, inglês e francês) ou qualquer tecla modificadora.
Isso é útil quando você se importa com qual tecla física foi pressionada, em vez do caractere correspondente. Por exemplo, ao escrever um jogo, você pode precisar de um determinado conjunto de teclas para mover o jogador em direções diferentes, e esse mapeamento deve ser independente do layout do teclado.
O atributo chave
Em seguida, temos o novo atributo key. Ela também é definida 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, considerando o layout do teclado, a localidade e as teclas modificadoras.
O valor do atributo key é útil quando você precisa saber qual caractere será mostrado 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 layout de teclado QWERTY. Pressionar a tecla física Q no teclado vai resultar em um KeyboardEvent com um atributo code definido como "KeyQ". Isso é válido independentemente do layout do teclado e de qualquer outra tecla modificadora. Para fins de comparação, em um teclado francês (AZERTY), essa tecla ainda teria uma code de "KeyQ", mesmo que a letra impressa no teclado seja um "a".
Pressionar a tecla física Q no mesmo teclado dos EUA normalmente 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 algum outro caractere.
Revisando nosso exemplo anterior, se você quiser que o jogo use as teclas WASD para movimento, use o atributo code e verifique "KeyW", "KeyA", "KeyS" e "KeyD". Isso funcionará para todos os teclados e todos os layouts, até mesmo teclados AZERTY que alternem a posição das teclas "w" e "z".
Teclados virtuais
Até agora, temos focado no comportamento assumindo um teclado físico. E os usuários que digitam em um teclado virtual ou em um dispositivo de entrada alternativo? A especificação oferece orientação oficial para o atributo code. Para resumir, um teclado virtual que imita o layout de um teclado padrão precisa resultar na definição de um atributo code adequado, mas teclados virtuais que adotam layouts não tradicionais podem fazer com que a code não seja definida.
As coisas são mais simples para o atributo key, que é definido como uma string com base no caractere que o usuário (virtualmente) digitou.
Testar
Gary Kačmarčík criou uma demonstração fantástica para visualizar todos os atributos associados a KeyboardEvents:
Suporte a vários navegadores
O suporte para o atributo code está, no momento, limitado ao Chrome 48+, Opera 35+ e Firefox 44+.
O atributo key é compatível com o Firefox 44+, Chrome 51+ e Opera 38+, com suporte parcial no Internet Explorer 9+ e Edge 13+.