Gestion des évènements spécifiques aux formulaires

45 min Niveau 7

Introduction

JQuery permet de gérer une multitude d’événements concernant les formulaires grâce à de nombreuses méthodes présentées ci-dessous.

Les méthodes focus() et focusin()

Lorsque l'élément est l'élément actif du document, c'est-à-dire lorsque le curseur de la souris se trouve sur l'élément qu'il contient, l'élément à ce qu’on appelle le “focus”. Par exemple, lorsqu'un utilisateur clique sur un champ de formulaire, celui-ci devient alors “focus”.

JQuery fournit deux méthodes pour gérer l'événement de focus : les méthodes focus() et focusin(). L'événement de focus est ainsi envoyé à l'élément lorsqu'il obtient le focus.

La méthode focusin() est similaire à la précédente, à ceci près qu’elle attache un événement à l’élément courant ainsi qu’à ses éléments enfants.

<!-- Code HTML de base -->
<body>
    <h1>Titre principal</h1>
    <form>
        <div>
            <label for="nom">Nom : </label>
            <input type="text" id="prenom">
        </div>
        <div>
            <label for="prenom">Prénom : </label>
            <input type="text" id="prenom">
        </div>
        <div>
            <label for="mail">Mail : </label>
            <input type="email" id="mail">
        </div>
    </form>
</body>

$(document).ready(function(){
    //Change la couleur de fond du champ en rouge dès qu'il a les focus
    $("input").focus(function () {
        $(this).css("background-color", "red");
    });

    /* Avec on()
    $("input").on('focus', function() {
        $(this).css("background-color", "red");
    });
    */

    //Change la couleur de fond des label en orange dès qu'un élément dans 
    //le formulaire a le focus
    $("form").focusin(function () {
        $("label").css("background-color", "orange");
    });

    /* Avec on()
    $("form").on('focusin', function() {
        $("label").css("background-color", "orange");
    });
    */
});

Les méthodes blur() et focusout()

JQuery fournit deux méthodes pour gérer l'événement de perte de focus : blur() et focusout(). La méthode blur() est l’exacte opposé de focus(), puisqu’elle attache un événement pour un élément qui perd le focus.

La méthode focusout() est quant à elle l’exacte opposé de focusin(), elle est donc similaire à blur() à ceci près que les éléments enfants seront également concernés par les événements.

<!-- Code HTML de base -->
<body>
    <h1>Titre principal</h1>
    <form>
        <div>
            <label for="nom">Nom : </label>
            <input type="text" id="prenom">
        </div>
        <div>
            <label for="prenom">Prénom : </label>
            <input type="text" id="prenom">
        </div>
        <div>
            <label for="mail">Mail : </label>
            <input type="email" id="mail">
        </div>
    </form>
</body>

$(document).ready(function(){
    //Change la couleur de fond du champ en rouge dès qu'il a les focus
    $("input").focus(function () {
        $(this).css("background-color", "red");
    });

    /* Avec on()
    $("input").on('focus', function() {
        $(this).css("background-color", "red");
    });
    */

    //Change la couleur de fond du champ en orange dès qu'il perd les focus
    $("input").blur(function () {
        $(this).css("background-color", "orange");
    });

    /* Avec on()
    $("input").on('blur', 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 !