Como adicionar atalhos de teclado ao seu site

Gosta de atalhos de teclado? Eles podem ajudar você a economizar muito tempo, certo? Gostaria de adicionar atalhos de teclado ao seu próprio site, para o benefício de seus visitantes? Melhoraria muito a acessibilidade e navegação do seu site.

Neste post, darei um guia rápido sobre como adicionar atalhos à sua página da Web usando uma biblioteca JavaScript chamada Mousetrap. Com Ratoeira você pode designar chaves como Shift, Ctrl, Alt, Opções e Comando para realizar funções específicas no seu site. Também funciona bem em navegadores mais antigos.

Mais sobre Hongkiat:

• Criando dicas animadas facilmente com o Hint.Css
• Construindo um guia passo-a-passo usando o Intro.Js [Tutorial]
• Como estilizar o controle deslizante da escala HTML5
• Como usar cookies e locais de armazenamento HTML5

Começando

Comece criando um novo documento HTML junto com o conteúdo e vinculando a biblioteca Mousetrap. Usarei a biblioteca Mousetrap hospedada em CDNjs para que a biblioteca seja servida através da rede CloudFlare, que deve ser mais rápida que o nosso próprio servidor

Agora vamos usar a ratoeira 'ligar' método para anexar as teclas do teclado com a função. Você pode atribuir uma única tecla, uma combinação de teclas ou chaves de sequência, por exemplo

Chave única

Neste exemplo, ligamos os s.

 Mousetrap.bind ('s', function (e) // sua função aqui…); 

Chave de Combinação

Neste exemplo, ligamos o Ctrl e o s. Você precisará pressionar as duas teclas para executar a função designada.

 Mousetrap.bind ('ctrl + s', função (e) // sua função aqui…); 

Chave de Sequência

Neste exemplo, o usuário precisará pressionar g e depois s subseqüentemente. Se você está desenvolvendo um jogo baseado na web, isso pode ser útil para adicionar um combo secreto de chave oculta.

 Mousetrap.bind ('g s', função (e) // sua função aqui…); 

Usando Mousetrap

Vamos construir uma página web simples com alguns atalhos de teclado que permitem aos usuários acessar algumas funcionalidades no site. Estaremos usando o jQuery para facilitar a manipulação do documento HTML e selecionar elementos HTML.

Vamos começar com algo fácil.

Vamos vincular uma chave que permitirá ao usuário se concentrar no campo de entrada de pesquisa rapidamente.

1. O seguinte é a marcação HTML para a pesquisa junto com o identidade.

2. Em seguida, criamos uma função que focará a entrada de pesquisa.

 função de pesquisa () var search = $ ('# search'); search.val ("); search.focus (); 

3. Por fim, ligamos uma chave para executar a função.

 Mousetrap.bind ('/', pesquisa); 

4. Isso é tudo. Agora você deve poder navegar até a entrada de pesquisa pressionando o botão /.

Como alternativa, você também pode vincular a combinação de teclas, Ctrl / Cmd + F, que é um atalho de tecla popular usado para pesquisa em muitos aplicativos da área de trabalho:

 Mousetrap.bind (['command + f', 'ctrl + f'], pesquisa); 

Usando Mousetrap com Bootstrap

É fácil integrar a Ratoeira com um framework, por exemplo, o Bootstrap. Neste segundo exemplo, mostraremos uma janela de ajuda que exibirá uma lista de atalhos disponíveis no site. Aqui, eu opto pelo Bootstrap Modal para apresentar a lista e designar o? tecla para mostrar o modal.

Apesar de ? só é acessível com a tecla Shift, ligando apenas o? chave é suficiente.

 Mousetrap.bind ('?', Function () $ ('# help'). Modal ('show');); 

Agora quando você acertar o? chave, um pop-up aparecerá.

Dica para ligação eficiente

Com o tempo, sua crescente coleção de atalhos de teclado pode começar a atrapalhar seu código. Se isso acontecer, há uma extensão que você pode adicionar para “ligação de chave” códigos mais eficientes. É nomeado o “ligar dicionário”. Adicione esta extensão após a biblioteca primária da Ratoeira, mousetrap.min.js.

Agora, em vez de separar cada ligação de chave, podemos agrupá-las em um único .ligar() método, assim:

 Mousetrap.bind ('/': search, 't': tweet, '?': Função modal () $ ('# help'). Modal ('show');, 'j': função seguinte ( ) highLight ('j'), 'k': função prev () highLight ('k')); 

Para uma implementação mais avançada, você pode ver a demonstração que eu fiz. Na demonstração, você pode pressionar a tecla J ou K para realçar a postagem e pressionar T para twittar a postagem atual realçada..

• Ver demonstração
• Baixar