Comment ajouter des raccourcis clavier à votre site Web

Vous aimez les raccourcis clavier? Ils peuvent vous aider à gagner beaucoup de temps, non? Souhaitez-vous ajouter des raccourcis clavier sur votre propre site Web, pour le bénéfice de vos visiteurs? Cela améliorerait grandement l'accessibilité et la navigation de votre site..

Dans cet article, je vais vous expliquer rapidement comment ajouter des raccourcis à votre page Web à l'aide d'une bibliothèque JavaScript appelée Mousetrap. Avec la souris, vous pouvez désigner des clés comme Maj, Ctrl, Alt, Options et Commande pour effectuer des fonctions particulières sur votre site web. Cela fonctionne aussi bien sur les anciens navigateurs.

Plus sur Hongkiat:

• Créer facilement des info-bulles animées avec Hint.Css
• Construire un guide pas à pas en utilisant Intro.Js [Tutoriel]
• Comment styler un curseur de plage HTML5
• Comment utiliser les cookies et le stockage local HTML5

Commencer

Commencez par créer un nouveau document HTML avec le contenu, puis en reliant la bibliothèque Mousetrap. J'utiliserai la bibliothèque Mousetrap hébergée sur CDNjs pour que la bibliothèque soit servie via le réseau CloudFlare, ce qui devrait être plus rapide que notre propre serveur.

Maintenant, nous allons utiliser le piège à souris 'lier' méthode pour attacher les touches du clavier avec la fonction. Vous pouvez assigner une seule touche, une combinaison de touches ou des touches de séquence, par exemple

Clé unique

Dans cet exemple, nous lions le s.

 Mousetrap.bind ('s', function (e) // votre fonction ici…); 

Clé de combinaison

Dans cet exemple, nous lions les touches Ctrl et s. Vous devrez appuyer simultanément sur les deux touches pour exécuter la fonction désignée..

 Mousetrap.bind ('ctrl + s', fonction (e) // votre fonction ici…); 

Clé de séquence

Dans cet exemple, l'utilisateur devra appuyer sur g puis sur s par la suite. Si vous développez un jeu Web, cela peut être utile pour ajouter un combo de clé cachée secret.

 Mousetrap.bind ('g s', function (e) // votre fonction ici…); 

Utiliser la souricière

Nous allons créer une simple page Web avec quelques raccourcis clavier permettant aux utilisateurs d’accéder à certaines fonctionnalités du site Web. Nous utiliserons jQuery pour faciliter la manipulation du document HTML et la sélection des éléments HTML..

Commençons par quelque chose de facile.

Nous allons lier une clé qui permettra à l’utilisateur de se concentrer rapidement sur le champ de saisie de la recherche..

1. Ce qui suit est le balisage HTML pour la recherche avec le identifiant.

2. Ensuite, nous créons une fonction qui se concentrera sur l'entrée de recherche.

 function search () var search = $ ('# search'); search.val ("); search.focus (); 

3. Enfin, nous lions une clé pour exécuter la fonction.

 Mousetrap.bind ('/', recherche); 

4. C'est ça. Vous devriez maintenant pouvoir naviguer vers l’entrée de recherche en appuyant sur le bouton /.

Alternativement, vous pouvez également lier la combinaison de touches, Ctrl / Cmd + F, qui est un raccourci clavier populaire utilisé pour la recherche dans de nombreuses applications de bureau:

 Mousetrap.bind (['commande + f', 'ctrl + f'], recherche); 

Utilisation de la souris avec Bootstrap

Il est facile d’intégrer le Mousetrap à un framework, par exemple Bootstrap. Dans ce deuxième exemple, nous allons afficher une fenêtre d’aide qui affiche une liste des raccourcis disponibles sur le site Web. Ici, j'opte pour Bootstrap Modal pour présenter la liste et désigner le? clé pour montrer le modal.

Bien que le ? est uniquement accessible avec la touche Maj, liant uniquement le? la clé est suffisante.

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

Maintenant, quand vous frappez le? touche, une fenêtre apparaîtra.

Astuce pour une reliure efficace

Au fil du temps, votre collection croissante de raccourcis clavier risque de gâcher votre code. Si cela se produit, vous pouvez ajouter une extension pour que votre “reliure à clé” codes plus efficaces. Il est nommé le “lier dictionnaire”. Ajouter cette extension après la bibliothèque principale Mousetrap, mousetrap.min.js.

Maintenant, au lieu de séparer chaque liaison de clé, nous pouvons les regrouper proprement dans un seul .lier() méthode, comme si:

 Mousetrap.bind ('/': recherche, 't': tweet, '?': Fonction modal () $ ('# help'). Modal ('show');, 'j': fonction next ( ) highLight ('j'), 'k': fonction prev () highLight ('k')); 

Pour une implémentation plus avancée, vous pouvez voir la démo que j'ai faite. Dans la démo, vous pouvez appuyer sur la touche J ou K pour mettre en surbrillance le message et appuyer sur T pour tweeter le message en cours que vous avez mis en surbrillance..

• Voir la démo
• Télécharger