Gestion des évènements déclenchés au clavier

30 min Niveau 7

Introduction

Tout comme jQuery permet de gérer les événements déclenchés par la souris, il permet également de gérer les événements liés au clavier, tels que l’appui sur une touche, son relâchement, etc...

Les méthodes keydown() et keyup()

La méthode keydown() permet de gérer les événements liés à l’appuie d’une touche sur le clavier. Si la touche maintenue enfoncée, l'événement sera renvoyé chaque fois que le système d'exploitation prendra en compte la répétition de la touche.

À l’inverse, la méthode keyup() permet de gérer les événements de relâchement d’une touche clavier.

Chacune de ces méthodes prend en argument une fonction, dans laquelle il est généralement passé un argument “event”, qui permet d'interagir avec l’événement déclenché, et donc par exemple de récupérer le nom de la touche clavier qui est déclenchée.

<!-- Code HTML de base -->
<body>
    <h1>Titre principal</h1>
    <label for="texte">Ecrivez dans le champ : </label>
    <input type="text" id="texte">
    <p>Code de la dernière touche pressée : <span></span></p>
</body>

$(document).ready(function(){
    // Change la couleur de fond du champ en bleu dès qu'une touche est 
    // pressée et affiche le code de la dernière touche pressée
    $("#texte").keydown(function (event) {
        $(this).css("background-color", "red");
        $("span").text(event.which);
    });

    /* Avec on()
    $("#texte").on('keydown', function(event) {
        $(this).css("background-color", "red");
        $("span").text(event.which);
    });
    */

    // Change la couleur de fond du champ en jaune dès qu'une touche est 
    // pressée
    $("#texte").keyup(function () {
        $(this).css("background-color", "orange");
    });

    /* Avec on()
    $("#texte").on('keyup', function() {
        $(this).css("background-color", "orange");
    });
    */
});

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !