Gestion robuste des raccourcis clavier à l'aide de JavaScript

StackOverflow https://stackoverflow.com/questions/611326

  •  03-07-2019
  •  | 
  •  

Question

Quel est le moyen le plus efficace de créer un gestionnaire de raccourci clavier global pour une application Web utilisant JavaScript, c.-à-d. quels événements dois-je gérer et à quoi le ou les gestionnaires d’événements doivent-ils être attachés?

Je veux quelque chose comme le système de Gmail qui puisse gérer à la fois les raccourcis clavier et les raccourcis clavier avec les touches de modification, par exemple. Ctrl + B etc. Le code doit fonctionner dans IE 6 ainsi que dans les navigateurs modernes.

Je dispose du framework Prototype, mais pas de jQuery, veuillez donc ne pas donner de réponses spécifiques à jQuery!

Était-ce utile?

La solution

La bibliothèque de touches de raccourci disponible dans le package de contrôles LivePipe fonctionne avec Prototype et est compatible avec IE.

http://livepipe.net/extra/hotkey

Autres conseils

Je pensais juste en ajouter un autre. J'ai récemment publié une bibliothèque appelée Mousetrap. Découvrez-le à http://craig.is/killing/mice

JimmyP a publié ce commentaire dans un commentaire, mais il mérite d’être une réponse pour les besoins du vote.

http://www.openjs.com/scripts/events/keyboard_shortcuts/

Ce que je ferais, c’est d’attacher des événements onKeyUp au document.body. Ensuite, dans ce gestionnaire d'événements, j'utiliserais la méthode Element.fire pour déclencher un événement personnalisé. . Bien que cette étape soit facultative, elle vous aidera à dissocier le gestionnaire d’événements de l’action à exécuter. Vous pouvez également utiliser le même gestionnaire d’événements personnalisés à partir d’un événement clic sur un bouton. 

$(document.body).observe("keyup", function() {
    if(/* key + modifier match */) {
        $(document.body).fire("myapp:mycoolevent");
    }
});

$(document.body).observe("myapp:mycoolevent", function() {
    // Handle event.
});

Plus tard, pour lier le même événement à un bouton, cliquez sur: 

$(button).observe("click", function() {
    $(document.body).fire("myapp:mycoolevent");
});

En ce qui concerne la gestion des touches de modification, consultez cette ressource . (très vieux, mais semble toujours applicable) pour plus d'aide.

Il existe également une nouvelle bibliothèque JavaScript appelée jwerty . Elle est facile à utiliser et ne repose pas sur jQuery.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top