Au moins une fois par projet web, je crée des formulaires html dans lesquels il y a des valeurs par défaut ; typiquement dans un mini-formulaire d’identification avec un champ “identifiant” et champ “mot de passe”, ou bien un champ de recherche.

Il est confortable pour l’internaute de savoir ce qu’il peut écrire dans ce champ sans pour autant qu’on ait recours à la balise <label>, pour des raisons de place (surtout).
Mais il est par contre désagréable d’avoir à d’abord effacer la valeur par défaut avant de saisir ce qu’on souhaite.

Depuis longtemps javascript me permettait de supprimer la valeur par défaut lorsqu’on “entrait” dans le champ. Mais lorsqu’on “sort” du champ, comment rétablir la valeur par défaut si rien n’a été saisi ?

Jusqu’à présent je faisait ceci :

<input type="text" value="identifiant" onfocus="this.value='';" onblur="if (this.value=='') this.value='identifiant'" />

Ça marche parfaitement mais avec au moins 2 inconvénients :

• on se répète : il faut écrire la valeur par défaut 2 fois, d’où une possibilité d’oubli si elle doit changer
• on doit faire gaffe aux caractères utilisés : dans l’attribut “value” on entoure la valeur par des “double-quotes” et dans le code javascript par des “simple-quotes”… donc si on n’échappe par correctement les caractères on risque d’avoir des mauvaises surprises

Voici le code magique :

<input type="text" value="identifiant" onfocus="this.oldvalue=this.value;this.value='';" onblur="if (this.value=='') this.value=this.oldvalue;" />

Avantages :

• on ne se répète plus
• si ça s’affiche correctement dans le champ, il n’y aura pas de surprise au retour de la valeur
• le code est plus simple
• on peut copier/coller le code (la portion onfocus et onblur.) dans tous les champs de formulaires qui doivent fonctionner ainsi

Il reste tout de même une situation ou ces codes – le premier comme le second — ont une limite ; lorsqu’on ne souhaite pas vider la valeur du champ si elle n’est pas celle réellement par défaut. Les cas où ça se présente sont dans l’affichage des résultats de recherche où il y a le(les) mot(s) cherché(s) dans le champ au lieu de “Rechercher”.
Mais dans ces cas là on peut simplement ne pas inclure ces codes onfocus et onblur.