Combinação de atalhos de teclado para JavaScript

Escrito por steve mcdonnell Google | Traduzido por alexandre amorim
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Combinação de atalhos de teclado para JavaScript
O JavaScript permite que a página realize certas rotinas em função de determinados eventos (Jupiterimages/Photos.com/Getty Images)

Em algumas aplicações web, pressionar uma única tecla de atalho ou uma combinação delas desencadeia uma ação na aplicação. Teclas de atalhos padrão incluem "Ctrl + x" para mover texto, "Alt+F4" para fechar uma janela e "Shift + F5" para forçar uma atualização da página. Detectar a combinação dessas teclas em JavaScript é mais complicado do que se imagina. Exigências de navegadores antigos não incluíam detalhes como o valor a ser usado ao rotular cada tecla, e companhias diferentes usavam valores diferentes para as mesmas teclas. Enquanto é possível seguir uma abordagem recomendada ao checar as teclas pressionadas, verifique os valores e as suas diferenças entre os navegadores web.

Outras pessoas estão lendo

Teclas de atalho

Uma tecla de atalho serve para desencadear algum tipo de ação em uma aplicação quando ela for pressionada. Por exemplo, um jogo pode usar "z" e "c" como teclas de atalho para rotacionar um objeto para a esquerda ou a direita. Algumas aplicações usam uma combinação de teclas de atalho ao combinar os caracteres alfanuméricos padrão com outras teclas especiais, por exemplo, "G" e a seta para cima. Três teclas especiais, "Ctrl", "Alt" e "Shift" são usados em combinações de teclas de atalho. Por exemplo, "Ctrl + S" é normalmente usado como uma combinação para servir de atalho ao comando de "Salvar". Elas ainda podem incluir mais de uma tecla especial, como em "Ctril + Alt + P".

Cógido da tecla e código do caractere

Cada caractere imprimível possui um código numérico ASCII designado a ele, chamado de código do caractere. Cada tecla do teclado também possui um código numérico associado a ele chamado de código da tecla. Essas duas nem sempre são a mesma coisa. Por exemplo, "a" e "A" possuem dois códigos de caractere diferentes, mas compartilham o mesmo código de tecla. Caracteres que não são imprimíveis como as setas para cima e para baixo não possuem códigos de caractere.

Eventos de teclado

No JavaScript, quando uma tecla é pressionada, ela desencadeia uma série de eventos. Ele estabelece propriedades de um objeto de evento que fornece informação sobre o mesmo. Um evento "keydown" acontece quando uma tecla é pressionada e um evento "keyup" acontece quando ela é solta. Enquanto ela está pressionada, o evento "keypress" é ativado de forma contínua. Durante esse evento, a maioria dos navegadores fornece o código de caractere da tecla pressionada. Durante eventos "keydown" ou "keyup" ajusta-se o valor da tecla que causou o evento. Para todos os três, uma propriedade adicional chamada "which" é normalmente ajustada para o valor unicode da tecla pressionada, incluindo teclas especiais. Os navegadores também configuram três sinalizações -- ctrlKey, altKey and shiftKey -- indicando que essas foram pressionadas quando o evento foi chamado.

Diferenças entre navegadores

Selecionando o evento e a propriedade a usar ao determinar a combinação de teclas de atalho em JavaScript que foram pressionadas pode ser um desafio. Infelizmente, nem todos os navegadores interpretam ou implementam as especificações de navegação igualmente. Como resultado, Chrome, Firefox, Internet Explorer, Opera e o Safari não chamam os mesmos eventos ou usam os mesmos códigos de caractere, apenas o código das teclas. O Firefox apenas fornece o código de teclas durante eventos "keypress", enquanto que fornece o código do caractere em casos de "keyup" e "keydown". O código para a tecla de vírgula é 59 no Firefox e 186 no Internet Explorer e no Safari. A maioria das diferenças, entretanto, existem em teclas que não sejam alfanuméricas, "Ctrl", "Alt" e "Shift".

Determinando teclas de atalho

Use uma biblioteca externa, como o jQuery, Prototype, Dojo ou MooTools quando precisar rastrear uma combinação de teclas de atalho do JavaScript que incluem teclas especiais, porque essas livrarias normalmente lidam com as conversões entre os navegadores e possuem um objeto único para referências. Para determinar a tecla de atalho que ativou o evento sem uma biblioteca, use o evento "keypress" e verifique a propriedade "which". Se essa propriedade for zero ou indefinida, verifique a propriedade "keycode". Compare esse valor ao valor da tecla, verifique a tecla "Ctrl", "Alt" e "Shift", e determine se a combinação de teclas do JavaScript foi pressionada.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível