Changer le style des champs d'un formulaire avec jQuery

| Sam Dunn | Joris Crozier |

Cet article est la traduction de Changing Form Input Styles on Focus with jQuery (disponible ici) Translated with the permission of BuildInternet and the author. Retrouvez toutes les traductions disponibles de BuildInternet sur BuildInternet.developpez.com.

Beaucoup de formulaires peuvent être ennuyeux et plats, ne faites pas entrer les vôtres dans ce mélange. Ce tutoriel va vous montrer comment les épicer avec des classes CSS et des valeurs par défaut qui changent en fonction des éléments sélectionnés d'un formulaire. Le tout avec un peu de jQuery.
Commentez : Commentez

- Titre : Changer le style des champs d'un formulaire avec jQuery

- Auteurs : Sam Dunn, Joris Crozier

- Parution : 26 février 2009

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2009 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Quel est le but ?

- II. Étape 1 : la base

- III. Étape 2 : le CSS

- IV. Étape 3 : intégrer le jQuery

- V. Le produit fini

- VI. Liens

I - Quel est le but ?

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

II - Étape 1 : la base

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.

III - Étape 2 : le CSS

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.

IV - Étape 3 : intégrer le jQuery

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.

V - Le produit fini

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

VI - Liens

Vous pouvez consulter les autres traductions de Build Internet.

Vous pouvez aussi aller voir mes autres publications.