Changer couleur texte Javascript [Résolu/Fermé]

Signaler
Messages postés
28245
Date d'inscription
mercredi 28 novembre 2007
Statut
Modérateur, Contributeur sécurité
Dernière intervention
3 janvier 2020
-
crapoulou
Messages postés
28245
Date d'inscription
mercredi 28 novembre 2007
Statut
Modérateur, Contributeur sécurité
Dernière intervention
3 janvier 2020
-
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.

3 réponses

Messages postés
5374
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
869
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
28245
Date d'inscription
mercredi 28 novembre 2007
Statut
Modérateur, Contributeur sécurité
Dernière intervention
3 janvier 2020
7 003
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.
Messages postés
5374
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
869
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';}" />
Messages postés
18375
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
16 février 2020
4 140
crapoulou
Messages postés
28245
Date d'inscription
mercredi 28 novembre 2007
Statut
Modérateur, Contributeur sécurité
Dernière intervention
3 janvier 2020
7 003
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
18375
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
16 février 2020
4 140
Oui, mais sans la balise style.
crapoulou
Messages postés
28245
Date d'inscription
mercredi 28 novembre 2007
Statut
Modérateur, Contributeur sécurité
Dernière intervention
3 janvier 2020
7 003
Nickel avec ceci exactement dans la CSS :

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


Merci beaucoup ! ;-)