Raccourcis claviers et combinaisons de touches en JavaScript

Lorsqu’on créé une application, le clavier peut être utilisé pour autre chose que de la saisie. Que ce soit avec la méthode JavaScript native onkeypress ou avec keypress de jQuery, l’interception d’une touche pressée doit se faire manuellement. En traduction algorithmique, « si telle touche est pressée, je fais ça ». Pour étendre l’usage des actions autour du clavier, nous allons faire appel à une bibliothèque. Il y en a deux qui sortent du lot, avec quelques différences.

Mousetrap (site)

Contrairement à ce que son nom indique, cette bibliothèque intercepte uniquement les interruptions clavier, pas les clics ni les gestures. Passons en revue les évènements qu’elle peut reconnaitre pour déclencher l’appel d’une fonction :

  • Catcher n’importe quelle touche seule. ex : « entrer »
  • Catcher des combinaisons de touches. ex : « ctrl + s »
  • Catcher des suites de touches. ex : « g, o »
  • Catcher une suite de touches ET une combinaison. ex : « g, o, ctrl + s »
  • Associer plusieurs touches, combinaisons ou suites au même évènement
  • Déclencher soit même les évènements définis avec Mousetrap
  • Limiter un évènement en l’attachant à un élément du DOM
  • Réinitialiser, mettre en pause et reprendre l’exécution de Mousetrap (tous les évènements et non individuellement)
  • Enregistrer une séquence saisie par l’internaute pour déclencher une action

La bibliothèque exclue les input, textarea et select par défaut qui peuvent être pris en compte par l’ajout d’une classe mousetrap. Il n’y a aucune interaction proposée avec jQuery et la documentation est claire.

jwerty (lien)

Cette bibliothèque propose visiblement les mêmes fonctionnalités sauf être réinitialisée et mise en pause. Elle ajoute en revanche :

  • La possibilité d’utilser des regex pour matcher plusieurs combinaisons de touches vers la même action
  • Renvoyer l’évènement bindé à jQuery : $('#myinput').bind('keydown', jwerty.event('⌃+⇧+P/⌘+⇧+P', function () { [...] }));

Là aussi la doc est très claire.

Bilan

Les deux bibliothèques font le même poids minimifiées (à 1ko près). L’API est sensiblement la même, à ceci près que jwerty préfère utiliser le symbole UTF-8 de touches comme les flèches, pomme ou retour/effacer au lieu de mot-clés en anglais comme dans Mousetrap, ce qui doit être vraiment fastidieux à l’usage !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.