Ao pressionar uma tecla, a tecla correspondente fica amarela e permanece verde até você redefinir o teclado. A linha abaixo mostra o nome da tecla e o código informado pelo navegador; os eventos não saem da página.
Funciona localmente no seu navegadorPressione uma tecla do teclado físico e a tecla correspondente do layout na tela acende: amarelo na pressão e depois verde, onde fica até você redefinir o quadro. A linha abaixo do quadro mostra o nome da tecla e o código informado pelo navegador.
Os eventos de teclado são lidos apenas no navegador, então a página funciona sem conexão e nada é enviado: nenhuma tecla é registrada, guardada ou enviada, e o teste para quando a aba perde o foco.
O quadro é um layout de desktop padrão de 104 teclas. O amarelo significa “é esta a tecla que você acabou de pressionar” e o verde, “esta tecla já foi pressionada ao menos uma vez desde a última redefinição”. As teclas que você não tocou continuam brancas, então uma passada rápida mostra quais não responderam.
As teclas são identificadas pelo código que enviam, não pela etiqueta impressa no seu teclado. Em um teclado AZERTY ou Dvorak o destaque segue a posição física que produz aquele código, e a linha abaixo do quadro mostra o próprio código.
As duas teclas Shift, as duas Ctrl, as duas Alt e as duas Enter enviam o mesmo código. A página usa a tecla física pressionada, então o Shift direito acende o Shift direito do quadro em vez de acender sempre o esquerdo.
Com o Num Lock desligado, o teclado numérico informa códigos de navegação: o 5 vira Clear (12), o 1 vira End (35), o 7 vira Home (36). A tecla do bloco numérico continua acendendo e a linha abaixo mostra o código informado pelo navegador, que é justamente a divergência que mais confunde.
Os atalhos são tratados pelo navegador ou pelo sistema operacional antes de qualquer página receber o evento: Ctrl+W ou Cmd+W, Cmd+Tab, ajuda com F1, Print Screen e as teclas de volume e mídia da maioria dos notebooks. Nada acende, porque nada chegou à página.
A camada Fn de um notebook, um teclado com remapeamento interno e drivers que enviam macros também ficam abaixo do navegador. Se uma tecla funciona em outro programa e não aqui, o evento está sendo consumido ou reescrito antes de chegar à página.
A página mostra os eventos que o navegador entrega, um por vez. Não mede rollover, distância de acionamento, latência, chatter nem atraso de repetição, e não testa cabo, receptor ou switch.
Telas de toque e teclados na tela não produzem eventos de teclado físico, então em celular ou tablet o quadro serve apenas como referência de layout. Em tela estreita o quadro pode ser arrastado para os lados até o bloco da direita.