yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Formularfelder im Hintergrund verschwinden lassen

Wie man aktive Formularfelder hervorhebt und inaktive Felder mit einer leichten Transparenz versieht, damit sie im Hintergrund landen, steht hier geschrieben.

Manchmal ist es von Nöten, umfangreichere Formulare auszufüllen. Passt man mal kurz nicht auf, muss man einige Zeit suchen, um das aktive Feld zu finden, in dem man schreiben kann.
Wär es da nicht besser, das aktive Feld hervorzuheben und die inaktiven auszublenden? Richtig, es wär besser... Aber wie?

So:
Code:
<input type="text" onfocus="this.style.filter ='Alpha(opacity=100)';" onBlur="this.style.filter ='Alpha(opacity=30)';" style="filter:Alpha(opacity=30)" value="Eingabe">


Der Anfang ist der normale Anfang für ein input-Eingabefeld. Dann folgt ein onfocus-Attribut, was passieren soll, wenn das Eingabefeld ausgewählt (oder besser: fokussiert) wird. Es soll auf dieses (this) HTML-Element ein Style (style) angewandt werden, nämlich ein Filter.
Dieser Filter ist ein Alpha-Filter und ermöglicht es, das Element, auf das es angewandt wird, transparent zu machen. In Klammern dahinter steht immer opacity, was frei übersetzt "Intensität" bedeutet. Je höher die Zahl, desto mehr ist das Element sichtbar.
Summa summarum heisst dieses onfocus-Attribut also folgendes: Wende auf dieses Element den Filter Alpha mit der Intensität von 100 (also voll sichtbar) an.
Das zweite Attribut onblur ist das Gegenteil von onfocus: Es bezeichnet das Ereignis, wenn das Element wieder verlassen wird. Hier passiert das gleiche wie beim onfocus, nur dass die Transparenz auf 30 gesetzt wird. Damit ist das Auswahlfeld in den Hintergrund gesetzt.
Um zu gewährleisten, dass das Eingabefeld beim Laden der Seite im Hintergrund ist, gibt es noch einmal das normale style-Atrribut hinterher. Das hat natürlich den gleichen Wert, wie die Transparenz beim Verlassen des Feldes. Logisch, denn das Eingabefeld ist beim Laden der Seite ja noch nicht ausgewählt und damit auch noch nicht aktiv.

Lange Rede, kurzer Sinn: Das Eingabefeld von oben sähe nun so aus:
Code:
<input type="text" onfocus="this.style.filter ='Alpha(opacity=100)';" onBlur="this.style.filter ='Alpha(opacity=30)';" style="filter:Alpha(opacity=30)" value="Eingabe">


CSS-Kundige können das style-Atrribut noch mit Rahmenfarben oder Rahmendicke erweitern.
Leider funktionieren solche Filter nur im Internet Explorer, denn sie sind von Microsoft erfunden. Andere Browser sehen großzügig über diese hinweg und machen nix.

Geschrieben von Phil Marx am 18.06.2004 (8133x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren