Leere Input Felder farbig markieren

Professional

Sunday, September 27th 2009, 9:51pm

Leere Input Felder farbig markieren

Ich möchte in meinem Formular alle Felder, die leer sind mit der Farbe grau füllen. Ich habe es auch geschafft etwas zu coden, jedoch geschieht dies nur wenn das input Feld aktiviert wird. Ich möchte jedoch das das Feld auch grau ist, wenn es nicht aktiviert ist. Also beim Seitenaufruf. Geht wohl mit onload="FUNKTION" im Body Tag. Ich weiß aber nicht wie der JS Teil lauten soll. Mein Beispiel ist auch nur für ein iput Feld gedacht. Also müsste ich den JS Code jedem Input Feld zufügen. Aber es muss doch gehen, dass man im Head sagt, alle leeren input Felder sollen grau sein.

Hier mein bisheriger Versuch:

HTML Code

<html>
<head>
</head>
<body>
<form name="myform">
<input name="change" onfocus="if (this.value == '') this.style.backgroundColor='#ddd';">
</form>
</body>
</html>

x16

Professional

Posts: 172

Monday, September 28th 2009, 1:39pm

Ich habe es nun soweit:

HTML Code

<html>
<head>
<script type="text/javascript">
function pageBackground(bkgColor) {
if (document.myform.change1.value == '') {
document.myform.change1.style.backgroundColor=bkgColor;
}
if (document.myform.change2.value == '') {
document.myform.change2.style.backgroundColor=bkgColor
}
if (document.myform.change3.value == '') {
document.myform.change3.style.backgroundColor=bkgColor
}
}
</script>
</head>
<body onload="pageBackground('#ccc')">
<form name="myform" action="1.html" >
<input name="change1">
<input name="change2">
<input name="change3">
<input type="submit">
</form>
</body>
</html>

Jedoch klappen die IF Anweisungen nicht.

Koljan777

Professional

Posts: 216

Tuesday, September 29th 2009, 1:05am

Hi

so wie du es beschrieben hast funktioniert es. beim laden wird hintergrund grau gefärbt. willst du dass der hintergrund wieder weiß wird nachdem man was da rein schreibt oder wo ist jetzt das Problem?

x16

Professional

Posts: 172

Tuesday, September 29th 2009, 1:22pm

Ja er soll wieder weiß werden, wenn der Inhalt des Feldes wieder gelöscht wird.
Also, wenn die Input Felder leer sind, sollen sie grau sein, aber sobald etwas eingegeben worden ist, sollen sie weiß sein.

Koljan777

Professional

Posts: 216

Tuesday, September 29th 2009, 3:08pm

Du benutzt aber die onLoad Funktion, die wird nur ausgeführt wenn die Seite geladen wird.

was du brauchst ist die onChange Funktion der Textbox.

HTML Code

<html>
<head>
<script type="text/javascript">
function pageBackground() {
	if (document.getElementById('box1').value == "") {
		document.getElementById('box1').style.backgroundColor="#ccc";
	}else{
		document.getElementById('box1').style.backgroundColor="#fff";
	}
}
</script>
</head>
<body onLoad="pageBackground();">
<form name="myform" action="1.html">
	<input name="change1" id="box1" onChange="pageBackground();">
	<input type="submit">
</form>
</body>
</html>

Dann wird der Javascript Code nach dem Verlassen der Textbox aktualisiert. Wenn du es schon BEIM tippen aktualisiert haben willst, nutze die Keypress oder Keydown events.

und auf 3 Textfelder kannst du selber erweitern, Übung machts