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.
7 décembre 2007 à 12:38 |
bonjour,
pourquoi sur ma page ces fonctions ne marchent pas….dois-je intégrer un script en haut de page et si oui lequel??
http:\\www.savoie-biblio.com\index3.htm
7 décembre 2007 à 06:09 |
@Peggy
Dans ton code tu as mis “onmouseout” au lieu de “onblur”.
Je pense que si tu fais un copier/coller du code que j’ai indiqué, ça devrait marcher, car en l’état, le JS va reinitialiser le champ lorsque tu vas soumettre le formulaire, d’où une recherche impossible
30 janvier 2009 à 09:32 |
Thomas Fuchs, créateur de Scriptaculous a publié prototype_helpers (http://github.com/madrobby/prototype_helpers) où on peut trouver (entre autres) un petit bout de javascript qui facilite grandement cette opération : defaultValueActsAsHint
Je l’ai utilisé dans un projet et c’est vraiment super pratique.
23 avril 2009 à 12:28 |
Un grand merci pour ce code qui semble bien fonctionner. Juste une petite question pour que ce soit parfait : Comme peut-on arriver a “griser” la valeur par défaut?
Pour l’exemple il suffit de regarder le champ de recherche rapide intégré en haut à droite de la barre d’adresse dans IE ou safari.
Bonne continuation
28 avril 2009 à 12:02 |
Bonjour Julien,
J’utilise depuis peu un petit truc bien pratique créé par Thomas Fuchs (Prototype et Scriptaculous).
Il s’agit d’un petit Javascript qui permet exactement le comportement que tu recherches.
Ça s’appelle “Default value acts as hint” et c’est disponible ici : http://github.com/madrobby/prototype_helpers/tree/master
Je l’ai notamment mis en œuvre sur le moteur de recherche simplifié de http://fr.neomarco.com/ (à droite, dans le bandeau de navigation)