Dans les formulaires sur le web, on trouve souvent des champs texte qui affichent au départ une petite explication sur ce que l’utilisateur doit y taper. Le texte par défaut est souvent dans un ton gris qui signifie qu’il s’agit simplement d’une indication. Quand on entre dans le champ texte, la couleur du texte change. Et si jamais on quitte le champ texte en le laissant vide, la valeur par défaut revient avec son apparence originelle.

Petite démo:

Ce comportement est déjà implémenté dans les navigateurs modernes grâce à l’attribut placeholder de HTML5, malheureusement, quand il faut assurer la compatibilité avec tous les navigateurs, dont le vénérable et sénile Internet Explorer 7, HTML5 ne peut pas tout.

Voici de quoi mettre en œuvre cet effet très simplement avec jQuery.

On définit premièrement deux classes CSS:

• inputValDefaut définit l’apparence du champ texte quand il a sa valeur par défaut
• inputValDefautValeur est utilisé pour représenter le champ si l’utilisateur y a entré une valeur

Ici, la valeur par défaut sera en gris et les valeurs réelles en noir.

.inputValDefaut{color: #aaaaaa}
.inputValDefautValeur{color: black}

On déclare ensuite un ou plusieurs champs texte avec la classe inputValDefaut, et on utilise l’attribut title pour la valeur par défaut.

<input type="text" title="Taper une adresse" name="adresse" class="inputValDefaut">

Il ne reste plus qu’à copier-coller ces quelques lignes de Javascript, qui gèrent le changement d’état des champ texte et affecte leurs valeurs par défaut.

$(function(){
    	$(".inputValDefaut").bind({
    		blur:function(){
    			if($(this).val() == "")
    			{
    				$(this).val($(this).attr("title"));
    				$(this).removeClass("inputValDefautValeur");
    			}
    		},
    		focus:function(){
    			if($(this).val() == $(this).attr("title"))
    			{
    				$(this).val("");
    				$(this).addClass("inputValDefautValeur");
    			}
    		}
    	});
    	$(".inputValDefaut").each(function(){$(this).val($(this).attr("title"))});
});