11548 sujets

JavaScript, DOM et API Web HTML5

Couleur de champ en fonction de son contenu

Bonjour à tous,

Débutant en javascript, il me parraissait simple de faire ceci :

Je voudrais changer la couleur d'un champ (son arriere plan ou la couleur du texte) en fonction de sa valeur, en temps-réel.

Le but étant d'afficher le résultat d'une operation avec d'autre champ (cette partie fonctionne deja) et d'indiquer visuellement à l'utilisateur quand le résultat depassse une valeur donnée.

Merci d'avance pour l'aide que vous saurez m'apporter.
Bonjour,

Quelques pistes :
- Évènement onkeyup
- Propriété .value.
- Propriétés styllistiques .style.backgroundColor, .style.color.
Merci beaucoup. Je me suis un peu pris la tete mais avec des indices je savais dans quelle direction aller.

Ciao ++


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script language="JavaScript">
<!--

function test(obj){
	if(document.form1.champ.value>40)
		{
		obj.style.backgroundColor ="#cc0000";
		obj.style.color ="#ffffff";
		
		}
	else 
		{
		obj.style.backgroundColor ="#ffffff";
		obj.style.color ="#000000";
		}	
		
	}
//-->
</script>
</head>

<body>



<form id="form1" name="form1" method="post" action="">
  <input type="text" name="champ" onKeyup="javascript:test(this)"/>
</form>
</body>
</html>
variante plus simple:

<script type="text/javascript">

function test(obj){
	with(obj.style){
		backgroundColor= (obj.value>40) ? "#cc0000" : "#ffffff";
		color= (obj.value>40) ? "#ffffff" : "#000000";
	}
}

</script>

</head>

<body>



<form id="form1" method="post" action="">
  <input type="text" name="champ" onKeyup="test(this)" />
</form>
Sujet clos
Aller à