Mettre un texte par défaut dans un input qui s'efface au clic

Bonjour à vous tous !

Poursuivant ma lancée récente sur le Javascript (je me documente, je me documente), je me heurte de nouveau à un problème pratique.

Je vous explique ce que je souhaite faire. Dans Firefox 2, vous avez un champ de texte, en haut à droite, pour la recherche. Il contient un texte en grisâtre, avec marqué "Google". Si on clique dessus, il disparait, et on peut taper sa recherche. Si on le quitte sans rien taper, le "Google" gris revient. En revanche, si on tape une recherche, Google ne revient pas, évidemment.

Je souhaiterais faire exactement la même chose.

Un champ input/text, avec marquer "Taper votre recherche" en gris. Au clic, il disparait. Si l'utilisateur entre du contenu, "Taper votre recherche" ne doit pas revenir écraser ce contenu. En revanche, s'il ne tape rien et qu'il clique autre par, "Taper votre recherche" doit réapparaître.

Là, je ne vous demande pas de me coder un script, on est sur un forum d'entraide
MAIS, j'avais déjà vu des scripts tout fait, que je n'ai plus qu'à adapter, que je n'ai pas retrouvé. Et après une longue recherche sur Google, impossible de trouver ce genre de script.
Je fais donc appel à vous !

Ah, oui, s'il était possible de faire la même chose sur un textarea aussi... ça me ferait plaisir

(et je sais que celà ne dispense pas du label, qui renseigne sur le champ)

Salut,

Je te donne le principe à suivre et tu le codes...

Pour accéder au champ texte, tu peux te servir de getElementsByTagName ou getElementById suivant qu'il y ait un id ou non.
Pour accèder à la valeur par défaut, tu peux te servir de la méthode getAttribute.

A la prise du focus (onfocus), si cette valeur est égale à "Taper votre recherche" (if...), tu dis que value doit être égale à une chaîne texte vide (setAttribute).
A la perte du focus (onblur), si la valeur est vide (if...), tu la remplaces par "Taper votre recherche" (setAttribute).

A toi de jouer.

PS : Pour le textarea, c'est le même principe excepté que tu ne te sers pas de getAttribute mais que tu dois chopper la valeur du premier noeud enfant (firstChild.nodeValue) du textarea.
Modifié par koala64 (10 Nov 2006 - 18:53)

Salut,

koala64 a écrit :
Concernant le texte gris, c'est effectivement via CSS que tu vas le paramétrer... Inutile de passer ça dans le JS à mon avis... Tu peux par exemple donner une couleur grise en normal et une autre couleur lorsque le champ est actif...

Par contre, cette solution ne marchera pas avec IE 6, si ?

oui exact... Je n'y pensais plus...

sous IE7 non plus d'ailleurs, ils ont résolu le hover mais pas le focus...

Du coup, ben le JS est bien nécessaire...

Et ça dans la CSS ça ne pourrait pas aller ?

#id_champ[value="Tapez votre recherche"] { ... }

Bon, OK, toujours pas d'IE .. 6 en tout cas. Mais ne sait-on jamais pour la 7.

QuentinC a écrit :
Et ça dans la CSS ça ne pourrait pas aller ?

#id_champ[value="Tapez votre recherche"] { ... }

Bon, OK, toujours pas d'IE .. 6 en tout cas. Mais ne sait-on jamais pour la 7.

Le problème, c'est que ça duplique ta valeur par défaut.

C'est grave de devoir dupliquer sa valeur par défaut ? IL ne faut juste pas oublier de la changer...
Bon, c'est vrai que ce serait mieux d'éviter.

a écrit :
Soit dit en passant, pour l'instant les codes pour chargement et pertedefocus sont rigoureusement les mêmes. smile

Ah... oui...

On va changer ça

J'ai réussi tout seul à mettre la couleur grise -enfin, gris beige dans mon cas, mais il suffit de changer le code de la couleur, hein-

Voici le javascript:

function textepardefaut(evenement){
	if(evenement=="prisedefocus")
	{
		if(document.getElementById('recherche').value == "Rechercher")
		{
			document.getElementById('recherche').style.color = "#000";
			document.getElementById('recherche').value = '';
		}
	}
	if(evenement=="pertedefocus")
	{
		if(document.getElementById('recherche').value == "")
		{
			document.getElementById('recherche').value = 'Rechercher';
			document.getElementById('recherche').style.color = "#5F4E2D";
		}
		if(document.getElementById('recherche').value == "Rechercher")
		{
			document.getElementById('recherche').style.color = "#5F4E2D";
		}
	}
}

Et voici le HTML:

<input type="text" id="recherche" value="" onfocus="textepardefaut('prisedefocus')" onblur="textepardefaut('pertedefocus')"/>
<script type="text/javascript">textepardefaut('pertedefocus')</script>

Maintenant, que tout marche, tout ce que je souhaiterai, c'est que le code HTML ressemble à ça:

<input type="text" id="recherche" value="" />

Et que les fonctions soient appelées via javascript uniquement; Avez vous une idée?

Merci beaucoup, déjà, de m'avoir guidé pour faire cette fonction, j'ai beaucoup appris déjà.

Sylvain a écrit :
Maintenant, que tout marche, tout ce que je souhaiterai, c'est que le code HTML ressemble à ça:

<input type="text" id="recherche" value="" />

Et que les fonctions soient appelées via javascript uniquement; Avez vous une idée?

Merci beaucoup, déjà, de m'avoir guidé pour faire cette fonction, j'ai beaucoup appris déjà.

Dans ce cas-là, il te suffit d'utiliser l'évènement "load" :

function initTexteParDefaut() {
  ...
}

window.onload = initTexteParDefaut;

(sachant qu'il faudra faire un peu plus compliqué si plusieurs scripts utilisent cet évènement.)

Et ensuite, le principe sera le même pour aller ajouter les évènements "focus" et "blur" à ton élément de formulaire.

Tu peux aussi envisager d'utiliser une classe plutôt qu'un id pour identifier les élèments qui auront ce comportement. Cela te permettra de l'appliquer facilement à plusieurs éléments de ta page.

Salut,

Quelqu'autres petites remarques...

Dans le script que tu as montré, tu répètes 8 fois document.getElementById('recherche').

Une bonne idée serait de le définir au sein d'une variable afin d'augmenter la lisibilité de ton script.

function textepardefaut(evenement){
   var oRech = document.getElementById('recherche');
   ...
}

-> Tu n'aurais plus qu'à écrire oRech à chaque fois que tu as besoin de cette expression.

Eldebaran a écrit :
Tu peux aussi envisager d'utiliser une classe plutôt qu'un id pour identifier les élèments qui auront ce comportement. Cela te permettra de l'appliquer facilement à plusieurs éléments de ta page.

oui ou alors, dans ton script, de définir la valeur de l'id en tant qu'argument de ta fonction.

Par ailleurs, pour tous les styles que tu souhaites appliquer, tu peux définir une classe CSS plutôt que de te servir de l'objet style, ce qui te permettra de ne modifier les styles que dans le CSS si besoin est.

oRech.className = 'gris';

Autre chose que tu pourrais ajouter, c'est de sélectionner ton texte à la prise du focus pour toute valeur autre que "Rechercher". Ca permet de l'effacer en une seule pression. -> voir la méthode select().