Version complète: sur le forum Webmaster Hub : Texte de fond dans un champ de formulaire
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
yhugo
mercredi 7 juin 2006 à 13:50
Bonjour tous,

Comment fait-on pour que le texte qui identifie le champs d'un formulaire disparaisse automatiquement lorsqu'on entre une valeur ?

Je ne sais pas si vous voyez ce que je veux dire ? smile.gif

J'ai essayé plusieurs recherches mais sans succès ... peut-être parce que je ne sais pas trop comment le formuler pour les recherches ...

Merci et bonne journée



yhugo
captain_torche
mercredi 7 juin 2006 à 13:55
J'imagine que tu veux parler du message 'tapez vitre recherche ici', qui disparait quand tu cliques dans le champ ?

Pour faire simple, c'est du Javascript :
Le message est présent par défaut dans le champ.
Sur l'action onFocus, on vérifie la valeur du champ. Si elle est égale à notre 'chaîne de base', alors on la supprime.
yhugo
mercredi 7 juin 2006 à 14:05
CITATION(captain_torche @ mercredi 7 juin 2006, 08h55) *
J'imagine que tu veux parler du message 'tapez vitre recherche ici', qui disparait quand tu cliques dans le champ ?

Pour faire simple, c'est du Javascript :
Le message est présent par défaut dans le champ.
Sur l'action onFocus, on vérifie la valeur du champ. Si elle est égale à notre 'chaîne de base', alors on la supprime.


Merci Captain_torche ...

Je suis pas très érudit en Javascript ... Est-ce que c'est le genre de script que je pourrais trouver quelque part dans un annuaire de script ou c'est trop simplet ... sous quel nom pourrais-je chercher ça ?


merci


yhugo
PGMC
mercredi 7 juin 2006 à 14:09
Pour mettre un texte par défaut, et effacer ce texte quand l'utilisateur clique, il suffit de rajouter onFocus="java script:this.value=''" comme :
CODE
<input name="q" type="text" value="Textepar défaut" onFocus="java script:this.value=''">


Je serais intéressé par la solution de Captain Torche qui est plus évoluée.
captain_torche
mercredi 7 juin 2006 à 14:14
PGMC : ta fonction effacera le champ de formulaire à chaque fois qu'on cliquera dedans (on qu'on lui attribuera le focus).

On peut faire un p'tit truc du genre :
HTML
<html>
<head>
<script type="text/javascript">
function checkValue(element) {
var champ = document.getElementById(element);
if(champ.value == 'Tapez ici votre recherche')
champ.value = '';
}
</script>
</head>
<body>
<form>
<input type="text" name="rechercher" id="rechercher" value="Tapez ici votre recherche" onFocus="checkValue(this.id)" />
<input type="submit" name="envoi" id="envoi" value="Rechercher" />
</form>
</body>
</html>
PGMC
mercredi 7 juin 2006 à 14:23
CITATION(captain_torche @ mercredi 7 juin 2006, 15h14) *
PGMC : ta fonction effacera le champ de formulaire à chaque fois qu'on cliquera dedans (on qu'on lui attribuera le focus).


Oui, cliquer ailleurs sur la page puis recliquer dans le champ efface ce dernier. Pour un moteur de recherche interne à un site ce n'est pas forcément trop gênant, mais ta solution est nettement meilleure : merci pour le code.
yhugo
mercredi 7 juin 2006 à 14:29
Wow ... c'est rapide !

Merci les gars



yhugo
Dudu
mercredi 7 juin 2006 à 14:54
Bonjour

Une solution toute faite qui ne nécessite pas de toucher au code existe ici: labels.js wink.gif

Très pratique, et totalement accessible smile.gif
yhugo
mercredi 7 juin 2006 à 16:35
CITATION(Dudu @ mercredi 7 juin 2006, 09h54) *
Bonjour

Une solution toute faite qui ne nécessite pas de toucher au code existe ici: labels.js wink.gif

Très pratique, et totalement accessible smile.gif



Ça marche comme un gant ! tongue.gif

Merci
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.