Changer couleur texte Javascript

Résolu/Fermé

crapoulou Messages postés 28160 Date d'inscription mercredi 28 novembre 2007 Statut Modérateur, Contributeur sécurité Dernière intervention 21 mai 2024 - Modifié par jipicy le 28/04/2010 à 11:02
crapoulou Messages postés 28160 Date d'inscription mercredi 28 novembre 2007 Statut Modérateur, Contributeur sécurité Dernière intervention 21 mai 2024 - 28 avril 2010 à 16:55

Bonjour,

J'ai un formulaire avec certaines zones de texte de préremplies de la notion de "Champ obligatoire" en gris (qui s'efface lorsque l'on clique dessus pour mettre son texte : Javascript).

Code CSS pour mettre en gris :

form input{ 

 color:grey; 

}

Je désirerai mettre le texte en noir lorsque le texte est différent de 'Champ obligatoire'. Je pense qu'il faut passer par du Javascript.

Exemple de code d'une zone de texte :

<label for="mail">Adresse mail</label> 
<input type="text" name="mail" id="mail" value='Champ obligatoire' onfocus="if(this.value=='Champ obligatoire'){this.value='';}" onblur="if(this.value==''){this.value='Champ obligatoire';}" />

Merci d'avance.

--
T'as un problème ? Passe sur CCM!
Il n'y a pas de problème sans solution.

A voir également:

Javascript changer couleur texte
Changer dns - Guide
Excel cellule couleur si condition texte - Guide
Changer clavier qwerty en azerty - Guide
Changer la couleur de la barre des taches - Guide
Changer couleur whatsapp - Accueil - Messagerie instantanée

3 réponses

Réponse 1 / 3

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
28 avril 2010 à 11:36

tu mets une classe a tes input

class="obligatoire"

class="facultatif"

et dans ton css:

.obligatoire{
color: grey;
}
.facultatif{
color:black;
}

crapoulou Messages postés 28160 Date d'inscription mercredi 28 novembre 2007 Statut Modérateur, Contributeur sécurité Dernière intervention 21 mai 2024 7 998
28 avril 2010 à 12:28

Salut Alain,
Merci de ta réponse.
Ce n'est pas tout à fait l'effet désiré.
Je voudrais que le texte "Champ obligatoire" soit gris et quand l'utilisateur rentre son propre texte, il écrive en noir.

Réponse 2 / 3

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
28 avril 2010 à 13:35

Ha ok

<label for="mail">Adresse mail</label> 
<input type="text" name="mail" id="mail" value='Champ obligatoire' onfocus="if(this.value=='Champ obligatoire'){this.value='';this.style.color="black"}" onblur="if(this.value==''){this.value='Champ obligatoire';}" />

Réponse 3 / 3

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
28 avril 2010 à 14:35

Un petit exemple : http://paste.pocoo.org/show/207096/

crapoulou Messages postés 28160 Date d'inscription mercredi 28 novembre 2007 Statut Modérateur, Contributeur sécurité Dernière intervention 21 mai 2024 7 998
28 avril 2010 à 16:00

Salut avion !
Je ne sais pas si ton pastebin reste longtemps hébergé alors je vais le poster pour les suivants qui auraient ce souci à l'avenir :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Teste</title>
	
	<style type="text/css">
	input[type="text"].champ_obligatoire {
		color:grey;
		font-style:italic;
	}
	</style>
</head>
<body>

<form action="form_action.asp">
	<p>
		<label for="nom">Nom :</label>
		<input type="text" name="nom" id="nom" value="Champ obligatoire" class="champ_obligatoire"
			onfocus="if(this.value == this.defaultValue){ this.value = ''; this.className = ''; }"
			onblur="if(this.value == ''){ this.value = this.defaultValue; this.className = 'champ_obligatoire'; }"
		/>
	</p>
</form>

</body>
</html>

*************

Néanmoins, cette partie peut-elle être mise dans la CSS ?

<style type="text/css">
	input[type="text"].champ_obligatoire {
				color:grey;
				font-style:italic;}
</style>

Il fallait donc en effet mettre des classes et changer le nom de la classe en Javascript si je comprends bien :
this.className = ''';

Merci beaucoup !

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
28 avril 2010 à 16:52

Oui, mais sans la balise style.

crapoulou Messages postés 28160 Date d'inscription mercredi 28 novembre 2007 Statut Modérateur, Contributeur sécurité Dernière intervention 21 mai 2024 7 998
28 avril 2010 à 16:55

Nickel avec ceci exactement dans la CSS :

.champ_obligatoire {
color:grey;
font-style:italic;
}

Merci beaucoup ! ;-)

Discussions similaires

sertissage des cables rj45