Changer le style des champs d'un formulaire avec jQuery

Nous voulons faire un formulaire dont les champs changent d'apparence quand ils ont le focus. Montez à bord et regardez cet exemple.

Premièrement, nous devons mettre en place le formulaire que nous utiliserons :

  <form action="">  
      <input name="status" id="status" value="Entrez quelque chose ici" type="text"/>  
      <input value="Submit" type="submit"/>  
  </form>

J'ai inclus "Entrez quelque chose ici" en tant que valeur par défaut du champ. C'est le texte qui sera affiché initialement, mais qui va disparaître quand le champ aura le focus.

Maintenant, faisons en sorte que les champs soient beaux. J'ai fait quelques stylisations à mon goût, mais vous devez inclure quelques classes pour les styles actifs/non actifs des champs.
J'ai utilisé idleField et focusField.

<style type="text/css">  
    *{  
        margin:0;  
        padding:0;  
        font:bold 12px "Lucida Grande", Arial, sans-serif;  
    }  
    body {  
        padding: 10px;  
    }  
    #status{  
        width:50%;  
        padding:10px;  
        outline:none;  
        height:36px;  
    }  
    .focusField{  
        border:solid 2px #73A6FF;  
        background:#EFF5FF;  
        color:#000;  
    }  
    .idleField{  
        background:#EEE;  
        color: #6F6F6F;  
        border: solid 2px #DFDFDF;  
    }  
</style>

Il est important de noter que si vous voulez enlever le contour bleu que Safari applique autour des champs lors du focus, vous devrez leur appliquer la propriété outline:none.

Voici la partie où nous ajoutons l'effet sur le focus aux champs du formulaire. Nous voulons voir deux choses se passer quand un champ possède le focus.

1. Le champ sélectionné passe de la classe inactive à celle active
2. Le texte par défaut dans la boite ("Entrez quelque chose ici") doit disparaître.

Similairement, nous voulons que l'inverse se produise quand on perd le focus.

$(document).ready(function() {  
    $('input[type="text"]').addClass("idleField");  
    $('input[type="text"]').focus(function() {  
        $(this).removeClass("idleField").addClass("focusField");  
        if (this.value == this.defaultValue){  
            this.value = '';  
        }  
        if(this.value != this.defaultValue){  
            this.select();  
        }  
    });  
    $('input[type="text"]').blur(function() {  
        $(this).removeClass("focusField").addClass("idleField");  
        if ($.trim(this.value) == '')){  
            this.value = (this.defaultValue ? this.defaultValue : '');  
        }  
    });  
});

Détaillons ce que nous faisons à partir du chargement de la page.
Pour tous les champs texte appliquez-leur la classe idleField.

$('input[type="text"]').addClass("idleField");

Quand un champ texte prend le focus, supprimez la classe inactive et ajoutez le style actif.

$('input[type="text"]').focus(function() {  
    $(this).removeClass("idleField").addClass("focusField");  
});

Quand l'utilisateur clique sur le champ, nous voulons que le texte "Entrez quelque chose ici" s'en aille si l'utilisateur n'a rien tapé d'autre dedans. Le code suivant vérifie si la valeur du texte est la même que lors du chargement du formulaire. Si c'est le cas, il est nettoyé pour faire de la place pour la saisie de l'utilisateur.

if (this.value == this.defaultValue){  
    this.value = '';  
}

Si l'utilisateur a déjà entré quelque chose dans le champ, au lieu de nettoyer quand il clique sur le champ encore une fois, nous voulons que le contenu soit en surbrillance.

if(this.value != this.defaultValue){  
    this.select();  
}

La partie suivante du script traite de ce qui arrive quand un champ perd le focus, essentiellement en faisant l'inverse de ce que nous venons d'expliquer.

  $('input[type="text"]').blur(function() {  
      $(this).removeClass("focusField").addClass("idleField");  
      if ($.trim(this.value) == ''){  
          this.value = (this.defaultValue ? this.defaultValue : '');  
      }  
  });

Une différence notable est l'utilisation de $.trim(), qui nettoie les espaces vides en début et fin de la saisie utilisateur. Gardez à l'esprit que si un utilisateur soumet le formulaire sans altérer les valeurs par défaut "Entrez quelque chose ici", celles-ci sont envoyées par le formulaire. Vous pouvez corriger cela en ajoutant un processus de vérification quand on clique sur le bouton de validation.

C'est à peu près ce que nous voulions, allez maintenant en avant et faites quelques formulaires jazzys.

• Voyez le produit fini
• Téléchargez les sources

Vous pouvez consulter les autres traductions de Build Internet.

Vous pouvez aussi aller voir mes autres publications.