Vider automatique un input type text avec jquery

Encore une petit bidouille jquery ce soir, parce que j'aime assez ça.

Il faut commencer par créer la function, qu'on appelera automatiquement lors du chargement de la page


function initFormsInputs()
{

Il faut commencer par récupèrer chaque input avec la class text, ce sont ceux que l'ont veut "vider" automatiquement quand on clique dedans (champ de recherche, de login...)

$("input.text").each(function(){

La value de l'input  est stockée dans l'élément grâce à la fonction .data() de jquery.

var storedValue = $(this).attr("value");
$(this).data("value", { datavalue : storedValue });

Lorsqu'on prend le focus sur l'élément on teste si la value est égale à la value stockée précédement, si c'est le cas, on vide de force la value

$(this).focus(function(){
if ($(this).val() == storedValue) 
{
$(this).val('');
}
});

Et maintenant on passe au blur (quand on quitte le champ sélectionné)
On récupère la value stockée, puis on vérifie que la value est vide (que l'utilisateur n'a pas entré de texte), dans le cas où le champ est vide, on restore la value stockée.

$(this).blur(function(){
var restoredValue = $(this).data("value").datavalue;

if ($(this).val() == '') 
{
$(this).val(restoredValue);
}
});
})
}

Et voilà, c'est assez simple et après plusieurs tests ça me semble assez bien fonctionner. Surtout qu'on ne rajoute aucuns éléments html et que le script fonctionne sur tous les input désigné par la class css choisie.

le code complet  :

function initFormsInputs()

{

$("input.text").each(function(){

var storedValue = $(this).attr("value");

$(this).data("value", { datavalue : storedValue });

$(this).focus(function(){

if ($(this).val() == storedValue) 

{

$(this).val('');

}

});

$(this).blur(function(){

var restoredValue = $(this).data("value").datavalue;

if ($(this).val() == '') 

{

$(this).val(restoredValue);

}

});

})

}

Allez, bonne nuit !

Edit : avec un retour de mon collègue Olivier on peut retrouver sur jsfiddle le code fonctionnel avec une petite modification et une autre technique utilisant la balise title :

http://jsfiddle.net/oilvier/vNdD7/