Changer couleur texte Javascript
Résolu
crapoulou
Messages postés
28002
Date d'inscription
Statut
Modérateur, Contributeur sécurité
Dernière intervention
-
crapoulou Messages postés 28002 Date d'inscription Statut Modérateur, Contributeur sécurité Dernière intervention -
crapoulou Messages postés 28002 Date d'inscription Statut Modérateur, Contributeur sécurité Dernière intervention -
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 :
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 :
Merci d'avance.
--
T'as un problème ? Passe sur CCM!
Il n'y a pas de problème sans solution.
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
-
tu mets une classe a tes input
class="obligatoire"
class="facultatif"
et dans ton css:
.obligatoire{
color: grey;
}
.facultatif{
color:black;
} -
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';}" /> -
Un petit exemple : http://paste.pocoo.org/show/207096/
-
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 ! -
-
-
