Revenir à la valeur par défaut d’un champ html input

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.

Cet article a été publié dans Informatique, PLUG. Ajoutez ce permalien à vos favoris.

6 commentaires pour Revenir à la valeur par défaut d’un champ html input

  1. peggy dit :

    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

  2. @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

  3. 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.

  4. julien dit :

    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

  5. A.Zambimarou dit :

    dans ton cas si la personne insert un texte dans le champ et par mégarde ou exprès perd le focus a son retour le texte est mis a zéro ça peut être chiant donc pour la partit

    onfocus= » this.value= »  »

    tu peux aussi le remplacer par

    onfocus= »if (this.value==’identifiant’) this.value= »; »

    pour éviter de vider la champ a chaque fois qu’il a le focus

    c’est une proposition et non une correction au webmaster de voir ce qui conviendrait dans sa situation

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s