Objekteigenschaften in Abhängigkeit von Events

[Wille]

Hallo Leute,

folgendes Problem : ich möchte in Abhängigkeit von bestimmten Events (onBlur, onChange, onFocus) die Eigenschaften eines Input-Feldes ändern. Genauer gesagt den Rahmen und die Hintergrundfarbe. Am liebsten wäre mir, wenn dies mit CSS zu verwirklichen wäre. Aber wie? Notfalls wäre Änderung auch mittels JS akzeptabel. Aber wie heißt der Parameter für Inputfeldhintergründe ("background-color" wie in CSS funktioniert nicht)? Änderungen im HTML wäre eher ungünstig ...

Vielen Dank für Eure Hilfe!
ciao, Wille

[Tobias Kloth]

Hallo,

folgendes Problem : ich möchte in Abhängigkeit von bestimmten Events (onBlur, onChange, onFocus) die Eigenschaften eines Input-Feldes ändern. Genauer gesagt den Rahmen und die Hintergrundfarbe. Am liebsten wäre mir, wenn dies mit CSS zu verwirklichen wäre. Aber wie?

onBlur gibt es als Pseudoklasse in css nicht, aber wenn onBlur mit dem Grundzustand identisch ist, kannst du ja die Felder ganz normal mit css formatieren ("input { ... }"). Auf ein onchange kann css nicht reagieren, aber für onfocus gibt es die Pseudoklasse :focus [1].

Notfalls wäre Änderung auch mittels JS akzeptabel.

da wirst du für onchange (und für onfocus in veralteten Browsern) nicht drumrumkommen.

Aber wie heißt der Parameter für Inputfeldhintergründe ("background-color" wie in CSS funktioniert nicht)?

wenn in css-Eigenschaften Bindestriche vorkommen musst du den Bindestrich weglassen und den ersten folgenden Buchstaben Großschreiben ([2]), eine Änderung der Hintergrundfarbe bei einem input bei onchange sähe also so aus:
 <input onchange="this.style.backgroundColor='#00F';">
(was es mit dem this aufsich hat steht in [3])

Grüße aus Nürnberg
Tobias

[1] http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus (lass dich nicht davon stören, dass da "für Verweise" drübersteht, es funktioniert in modernen Browsern für andere Elemente auch)
[2] siehe auch http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften
[3] http://de.selfhtml.org/javascript/sprache/objekte.htm#this

[wille]

Hey Tobias,

tausend Dank, werde ein Glück versuchen. Insbesondere das onChange - Event hat mich schon graue Haare gekostet. Funktioniert zwar im IE 6, nicht aber in NS (7, 7.1) oder IE 5.x ...

Schönen Sonntag noch.

ciao, Wille