Valeur des cases d'un formulaire

Bonjour,

Avec le code ci-dessous, on peut mettre la valeur d'une case d'un formulaire par défaut :

<input type="text" name="dateDeNaissance" id="dateDeNaissance" value="jj/mm/aaaa" />

L'utilisateur est à ce moment la obligé de sélectionner jj/mm/aaaa pour enfin le remplacer par sa date de naissance.
Comment pourrais-je faire pour que ce texte disparaisse au moment où le visiteur clique sur la case. Et ensuite si possible que lorsque qu'il désélectionnera la case (s'il n'a rien rentré) le texte jj/mm/aaaa réapparaisse.

S'il y a besoin de PHP pour cette opération, merci de m'indiquer l'endroit où re-poster mon sujet.

Merci d'avance pour votre aide.

Bonsoir KelT,

Tu devrais regarder du côté du langage javascript pour réaliser ce que tu veux faire .

Je te donne le code quick and dirty :

<input type="text" name="dateDeNaissance" id="dateDeNaissance" value="jj/mm/aaaa" onfocus="this.value=''; " />

sous les navigateurs qui le supportent, il y a placeholder qui sert exactement à ce que tu veux faire

<input type="date" placeholder="jj/mm/aaaa" />

et pour le reste du monde, il faut rajouter du JS pour obtenir la même fonctionnalité, tu peux t'inspirer de ce script que j'ai fait :
http://www.timeofmylife.com/assets/js/defaultvalue.class.js

quand je dis "inspiré", c'est pour de bon : ce code appartient à ma boîte, donc pas de copier/coller STP

Génial merci, je vous tiens au courant

Je n'ai pas réussi à faire ce que je voulais, j'ai déjà réussi à me faire comprendre

le

<input onfocus="this.value='jj/mm/aaaa'; " />

marche mais ce n'est pas ce que je veux, ce code affiche le texte jj/mm/aaaa lorsqu'on clique sur la case, il faut ensuite le sélectionner puis le supprimer, enfin bref.

<input placeholder="jj/mm/aaaa" />

ne marche pas, même si apparemment (si j'ai bien compris ce que tu m'as dit) c'est exactement ce que je cherche.
Même en utilisant le JavaScript que tu m'as donné ça ne fonctionne pas.

Je ne tiens pas non plus à faire des tonnes de JS pour obtenir ce que je veux, surtout que je débute dans ce langage. C'est étonnant qu'il n'y ai pas de code simple pour ceci, personne n'a d'idée ?

Je suis passé par hasard sur GéoPortail et pour rentrer "adresse" et "ville" c'est exactement ce que je cherche à faire, sauf qu'en regardant le code, il y a trop de JS autour qui m'embrouille.

Merci pour l'aide
Modifié par KelT (08 Jun 2010 - 20:25)

KelT a écrit :
<input placeholder="jj/mm/aaaa" /> ne marche pas

Tu n'as pas testé dans les navigateurs qui le supportent, apparemment. De mémoire: Opera, Chrome, Safari 5.

KelT a écrit :
Même en utilisant le JavaScript que tu m'as donné ça ne fonctionne pas.

Le script en question est sans doute fonctionnel. Encore faut-il savoir l'utiliser, ce qui demande des bases en JavaScript. (La remarque vaut pour tout script JS quel qu'il soit. )
Cela dit, jpvincent ne t'a pas donné ce script, il a clairement indiqué que tu n'avais pas le droit de le reprendre tel quel.

Pour un code JavaScript simple, il y a le code quick 'n dirty donné (pour de bon) par spiral123. On peut étoffer un peu:

<input type="text" name="dateDeNaissance" id="dateDeNaissance"
  value="jj/mm/aaaa"
  onfocus="if(this.value=='jj/mm/aaaa'){this.value=''};"
  onblur="if(this.value==''){this.value='jj/mm/aaaa'};" />

Tu peux aussi, et de préférence, faire quelque chose de similaire en gérant les évènements onfocus et onblur dans un script externe (en utilisant addEventListener ou une fonction utilitaire qui facilite la gestion des évènements compatible tous navigateurs).

Enfin, j'espère que ton champ de formulaire a par ailleurs un label explicite, parce que sinon pour l'accessibilité et l'ergonomie du formulaire... c'est mal parti.

Merci pour ta réponse, oui j'utilise des label
Ton code est pas mal ça se rapproche de ce que je veux, mais ça n'affiche le texte seulement quand on a cliqué dessus puis cliqué ailleurs en laissant le champ vide. Y a-t-il un moyen d'avoir le même résultat mais avec le texte affiché dès le départ ?

edit: autant pour moi, j'ai oublié de mettre value="jj/mm/aaaa" c'est exactement ce que j'avais besoin, merci beaucoup !
Modifié par KelT (09 Jun 2010 - 11:12)

J'aurais une dernière question, comment fait-on pour changer la couleur d'une value ?

edit: Ok c'est bon, pour ceux qui se poserait la question, j'ai mis ça dans mon fichier css

input
{
	background-color: rgb(116,139,255);
	color: rgb(200,200,200);
}
input:focus
{
	background-color: rgb(125,165,255);
	color: white;
}

lien vers formulaire

Encore merci a+
Modifié par KelT (09 Jun 2010 - 11:40)

Florent V. a écrit :

Cela dit, jpvincent ne t'a pas donné ce script, il a clairement indiqué que tu n'avais pas le droit de le reprendre tel quel.

Merci Florent
il manque une fonctionnalité d'envoi de mail pour suivre les threads auxquels on a répondu sur le forum, du coup je dois louper pas mal de réponses

@KelT
oui le JS que je t'ai donné a des dépendances plus larges (librairie YUI et détection du support de placeholder) donc il ne marche pas tel quel, c'était + pour que tu t'en inspires, tout en passant doucement à HTML5