Gegenteil von "onClick"?

[Ay Chiquita]

Hallo!

Als Lösung für mein hier beschriebenes Problem habe ich eine Login-Box mit JavaScript gestaltet.

<form>
<textarea rows="1" wrap="off" style="background-color: #FFFFFF;
	border: solid 1px;
	border-color: #DBDBDB;
	color: #777777;
	font-family: Verdana;
	font-size: 11px;
	height: 22px;
	overflow: hidden;
	padding: 3px;
	width: 100px;"
	onmouseover="this.style.borderColor='#1771AA',this.style.backgroundColor='#F1F1F1'"
	onmouseout="this.style.borderColor='#DBDBDB',this.style.backgroundColor='#FFFFFF'"
	onClick="this.style.borderColor='#1771AA',this.style.backgroundColor='#DDDDDD'">Benutzername</textarea>
</form>

Wie Ihr sehen könnt, verändert sich die Hintergrundfarbe und die Rahmenfarbe der Box, wenn man mit der Maus über die Box geht; und zu wiederum einer anderen Hintergrundfarbe, wenn man die Box anklickt. Wenn man nun jedoch mit der Maus die Box verlässt, wird die Box wieder weiß - was sie natürlich nicht soll. Man kann ja schließlich immer noch in die Box seinen Benutzernamen eintragen, nur dass sich die Maus nicht mehr über der Box befindet. Erst wenn man außerhalb der Box klickt, sollte sie wieder weiß werden. Hierzu bräuchte ich soetwas wie "onClickOut o.Ä., was es aber (nach meinem Wissen) nicht gibt.

Weiß jemand eine alternative Lösung?

Liebe Grüße,
Fabian

 

[Frank]

das nennt sich onblur()

 

[Ay Chiquita]

<form>
<textarea rows="1" wrap="off" style="background-color: #FFFFFF;
	border: solid 1px;
	border-color: #DBDBDB;
	color: #777777;
	font-family: Verdana;
	font-size: 11px;
	height: 22px;
	overflow: hidden;
	padding: 3px;
	width: 100px;"
	onmouseover="this.style.borderColor='#1771AA',this.style.backgroundColor='#F1F1F1'"
	onmouseout="this.style.borderColor='#DBDBDB',this.style.backgroundColor='#FFFFFF'"
	onClick="this.style.borderColor='#1771AA',this.style.backgroundColor='#DDDDDD'"
	onBlur="this.style.borderColor='#DBDBDB',this.style.backgroundColor='#FFFFFF'">Benutzername</textarea>
</form>

Das löst allerdings nur ein Problem. Wenn man nun die Box verlässt, verändert sie immer noch ihre Farben, obwohl man nach wie vor in die Box schreiben kann.

 

[Frank]

du musst halt dein onmouseout mit onblur ersetzen

 

[Ay Chiquita]

Hehe, wenn ich nun aber diesen Code nutze...

[...]
	onMouseOver="this.style.borderColor='#1771AA',this.style.backgroundColor='#F1F1F1'"
	onBlur="this.style.borderColor='#DBDBDB',this.style.backgroundColor='#FFFFFF'">Benutzername</textarea>
</form>

...dann stehe ich vor dem Problem, dass die Box beim Drübergehen die Farbe ändert (was so gewollt war), aber beim Verlassen mit der Maus (auch ohne in die Box zu klicken) ihre Farbe beibehält (was sie eigentlich nicht soll).

 

[Frank]

dann musst halt ne condition einbauen mit focus

 

[Ay Chiquita]

Gesucht & gefunden!

Schau hier!