Créer des raccourcis avec Mousetrap.js


Mousetrap.js est une bibliothèque JavaScript autonome pour ajouter ou configurer des raccourcis clavier pour votre site internet.

La bibliothèque est supporté par ces navigateurs :

  • Internet Explorer 6 +
  • Safari
  • Firefox
  • Chrome

Taille de l’archive : 1.94 Kb.
Taille de la bibliothèque décompressé : 3.5 KB
Télécharger la librairie sur github : Mousetrap.js

Avec des combinaisons de touches ou  juste avec une touche, on peut exécuter des fonctionnalités sur sont site  pour  améliorer la navigation ou afficher du texte. Commençons à faire appel à la librairie MouseTrap.js et ensuite ajoutons les raccourcis, on comprendra mieux avec le code source.

Mousetrap

On appel la librairie :

On insère ce code dans notre page pour utiliser MouseTrap.js.

Un touche

En appyant sur / nous allons exécuter le raccourcis défini.

Combinaisons de touches

Nous ajoutons la combinaisons CTRL+S pour enregistrer la page web en cours.

Mais cette combinaison marche que sous Windows et Linux mais inquiétez-vous pas nous allons aussi ajouter une combinaison de touches pour les utilisateurs de la pomme.

En ajoutant COMMAND+S et CTRL+S tous les utilisateurs de linux, windows et macOS peuvent utiliser ce raccourci.

Séquence des touches

En écrivant LELABO vous allez créer un raccourci pour faire apparaître une boite de dialoge. Il faut bien laisser un espace entre vos lettres : [‘l e l a b o’] pour que la séquences se fasse correctement.

Il existe beaucoup de raccourcis à créer pour ajouter des fonctionnalités incroyable pour ma part j’ai utilisé les plus simple pour cet article après à vous d’en trouver et nous les faire partager. En attendant, je vous laisse avec la petite démo que je vous ai fait. Bonne lecture et amusez-bien avec vos touches.

Démo Télécharger
Inspiré de ce bel article : Paulund.co.uk

Commentaires