Gérer des raccourcis clavier dans des projets Web

Il peut parfois être utile d’ajouter des raccourcis clavier dans nos applications Web afin de simplifier ou d’accélérer l’accès à certaines fonctionnalités. Mettre en place une gestion des raccourcis dans son projet est très facile : cela ne nécessite que quelques lignes de code JavaScript.

Il suffit pour cela de se brancher sur l’événement keydown qui est déclenché lorsque l’utilisateur appuie sur une touche du clavier. Ensuite, il faut vérifier les touches qui ont été enfoncées et lancer la fonction que vous souhaitez exécuter.

document.addEventListener('keydown', (event) => {
    if (
        event.shiftKey
        && event.key.toLowerCase() === 'u'
    ) {
        event.preventDefault();

        myFunc();
    }
});

Le code d’exemple ci-dessus vous permettra ainsi d’exécuter l’action de la fonction myFunc lorsque l’utilisateur presse à la fois la touche Shift et U. L’exécution de votre code se fera en désactivant le fonctionnement standard prévue par le navigateur (au travers de l’instruction event.preventDefault(); effectué en amont).