Créer des raccourcis-clavier avec jQuery

jQuery nous permet de réagir à une touche au clavier grâce aux fonctions keyup(), keydown() et keypress(). Il est même possible de réagir différemment à une touche en fonction de l'endroit où le focus est donné.

L'utilisation la plus courante consiste utiliser la touche Entrée pour soumettre le formulaire qui détient le focus. Il est cependant possible d'aller plus loin en utilisant ces fonctions pour définir des raccourcis-clavier.

▼Publicité

Dans l'exemple suivant, nous allons définir des raccourcis-clavier pour simuler un clic sur les boutons Page précédente, Page suivante et Éditer. Ce petit programme est également intéressant car il affiche le code associé à une touche donnée.

Afin de rendre le tout convivial, on prendra le soin d'indiquer dans une bulle d'aide (attribut title) la touche ou la combinaison de touches du raccourci-clavier.

HTML

<form>

    <p>

        Entrez du texte : <input type="text" id="inputid" />

    </p>

    <p><input type="button" id="pageprecedente" value="Page précédente" title="Précédente[alt+flèche gauche]" /></p>

    <p><input type="button" id="pagesuivante" value="Page suivante" title="Suivante[alt+flèche droite]" /></p>

    <p><input type="button" id="editer" value="Éditer" /></p>    

</form>

<p>Code de la touche lue à l'aide de keydown : <label id="codekeydown" /></p>

<p>Code de la touche lue à l'aide de keypress : <label id="codekeypress" /></p>

jQuery

$(function() {

    // pour les besoins de la démonstration, les boutons ne feront qu'afficher une boîte d'alerte

    $('#pageprecedente').click( function() {

        alert('Bouton page précédente pressé');

    });

    $('#pagesuivante').click( function() {

        alert('Bouton page suivante pressé');

    });    

    $('#editer').click( function() {

        alert('Bouton éditer pressé');

    });    

 

    $(document).keydown(function (event) {

        // si la touche Entrée a été pressée

        if (event.which == 13) {

            // générer un clic sur le bouton d'édition

            $('#editer').click();

        }

        // flèche gauche avec alt

        if (event.which == 37 && event.altKey) {

            $('#pageprecedente').click();

        }

        // flèche droite avec alt

        if (event.which == 39 && event.altKey) {

            $('#pagesuivante').click();

        }

        $('#codekeydown').html(event.which);

    });

 

    $(document).keypress(function (event) {

        // Touche Entrée : sera intercepté aussi bien avec keypress() qu'avec keydown()

        if (event.which == 13) {

            $('#editer').click();

        }

        // flèche gauche -> pas intercepté avec keypress()

        if (event.which == 37 && event.altKey) {

            $('#pageprecedente').click();

        }

        // flèche droite -> pas intercepté avec keypress()

        if (event.which == 39  && event.altKey) {

            $('#pagesuivante').click();

        }

        $('#codekeypress').html(event.which);

     });

});

Remarquez que les touches non imprimables comme les flèches, shift, alt et contrôle ne peuvent être interceptées que par keydown().

Notez également que les lettres majuscules et minuscules seront différentes lorsqu'interceptées par keypress(). Par contre, si on utilise keydown(), les touches A et a auront toutes deux la même valeur.

Pour tester le tout sur jsFiddle : http://jsfiddle.net/christianelagace/qqnc2mfp/

Pour plus d'information

« Javascript Char Codes (Key Codes) ». Cambia Research. http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories