26.12.2024

JavaScript: Código Chave para a Combinação Shift + Tab

Resposta Rápida

Para detectar a combinação de teclas Shift + Tab em JavaScript, você precisa usar duas propriedades: event.key e event.shiftKey. A verificação do evento do teclado inclui os seguintes passos: garantir que a tecla pressionada seja Tab e que o modificador shiftKey esteja ativo:

document.addEventListener('keydown', (event) => {
  if (event.key === 'Tab' && event.shiftKey) {
    // Operações para navegação reversa através dos controles!
  }
});

Ao escrever um código claro e moderno, é recomendado usar event.key em vez de códigos de tecla.

Conheça os Novos Métodos: e.key e e.code

Tecnologias de desenvolvimento web estão em constante evolução, e as abordagens de codificação mudam. Em comparação com o desatualizado e.keyCode, agora é recomendado usar as propriedades e.key e e.code. A propriedade e.key retorna o valor que descreve a localização física da tecla, enquanto e.code representa sua localização física, independentemente do idioma de entrada.

Compatibilidade com Navegadores Mais Antigos

Embora event.keyCode seja cada vez mais raro em códigos modernos, ainda existem navegadores desatualizados que não dão suporte a e.key. Nesse caso, é aconselhável utilizar a detecção de recursos e, se necessário, depender de e.keyCode.

Lembre-se da Acessibilidade

Ao desenvolver manipuladores de eventos de teclado, não se esqueça de considerar aspectos de acessibilidade. O uso apropriado de atributos HTML e ARIA garantirá que sua aplicação seja facilmente utilizável com tecnologias assistivas.

Visualização

Vamos ver como funciona a navegação no teclado através dos controles com a combinação Shift + Tab:

↖️🔑: Shift  
⇥🔙: Tab  

O que acontece quando são usados juntos:

| Elementos do Formulário | Direção da Transição |
| ----------------------- | -------------------- |
| Elemento 1 ➡️ Elemento 2 ➡️ Elemento 3 | Avançar com Tab        |
| Elemento 3 ⬅️ Elemento 2 ⬅️ Elemento 1 | Para trás com Shift + Tab |

Juntas, essas teclas Shift + Tab nos permitem voltar na navegação! 🕰️

Mais sobre code e key

• A propriedade event.code refere-se à localização física da tecla, não sendo afetada por alterações de idioma ou layout.
• event.key diz respeito ao valor ou função que a tecla executa, como Tab. Essa propriedade é inestimável quando se trata de navegação e execução de ações.

Confiabilidade do Tratamento de Eventos

Você configurou manipuladores de eventos de teclado? Preste atenção especial ao tratamento de combinações como Shift + Tab. Considere os estados e.shiftKey e e.code para que seu código responda de forma precisa às ações do usuário.

Exemplos de Uso do Shift + Tab

• Formulários Dinâmicos: Navegue rapidamente e facilmente de volta pelos campos de entrada sem usar o mouse.
• Navegação em Tabelas: Mova-se livremente entre as células para uma entrada ou visualização de dados conveniente.
• Controles de Jogos: Personalize os controles do teclado para jogadores ou elementos da interface em jogos web diretamente no navegador.

Recursos Úteis

1. KeyboardEvent: Propriedade keyCode - Web API | MDN — documentação detalhada sobre a propriedade keyCode.
2. Valores das Teclas para Eventos de Teclado - Web API | MDN — catálogo abrangente dos valores de teclas que simplifica o desenvolvimento.
3. Códigos de Caracteres JavaScript (Key Codes) - Cambia Research — uma ferramenta interativa para explorar códigos de caracteres em JavaScript.
4. Ferramenta de Tratamento de Eventos de Teclado JavaScript | Toptal® — este serviço permite que você encontre o código JS para qualquer evento de tecla.
5. WebAIM: Acessibilidade do Teclado — diretrizes e técnicas para garantir a acessibilidade dos comandos de teclado na web.
6. tabindex - HTML: Linguagem de Marcação de Hipertexto | MDN — exploração aprofundada do atributo tabindex, que é crucial para a navegação usando Shift + Tab.
7. Guia de Práticas de Autoria ARIA | W3C — informações sobre como usar ARIA para melhorar a navegação por teclado e a acessibilidade do site.

Video

Navigation