Changer couleur texte Javascript
Résolu
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
-
Un petit exemple : http://paste.pocoo.org/show/207096/
-
ModérateurSalut 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 ! -
-
-
-
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';}" /> -
tu mets une classe a tes input
class="obligatoire"
class="facultatif"
et dans ton css:
.obligatoire{
color: grey;
}
.facultatif{
color:black;
}
