Formular Eingabefeld Value mit onfocus/onblur Ereignissen layout

[feloidea]

Hallo Zusammen

Ich habe einen archivierten tollen Beitrag gefunden (http://forum.de.selfhtml.org/archiv/2005/2/t101528/) und mit einem weitern Beitrag kombiniert (http://kuttler.eu/de/artikel/html-formulare-und-onclickonfocus-ereignisse/). Dies funktioniert soweit bestens :-)

Ich möchte nun aber zusätzlich den vorgeblendeten value-text z.B. kursiv haben. Wie kann ich untiges Script mit einem weiteren Style ergänzen? Oder noch besser: gäbs die Möglichkeit zwei class im CSS-file gegenaeinender auszutauschen?

<input type="text" name="fon" id="fon" style="color:#999;" value="[phone]" onfocus="if(this.value==this.defaultValue){this.style.color='#000'; this.value='';}" onblur="if(this.value==''){this.style.color='#000'; this.value=this.defaultValue;}" />

MeineVersuche sind bisher gescheitert :-(:

<input type="text" name="fon" id="fon" class="textfield_grey" value="[phone]" onfocus="if(this.value==this.defaultValue){this.class='textfield'; this.value='';}" onblur="if(this.value==''){this.class='textfield'; this.value=this.defaultValue;}"

Danke und Gruss,
feloidea

[molily]

Hallo!

<input type="text" name="fon" id="fon" class="textfield_grey" value="[phone]" onfocus="if(this.value==this.defaultValue){this.class='textfield'; this.value='';}" onblur="if(this.value==''){this.class='textfield'; this.value=this.defaultValue;}"

Der Ansatz ist schon richtig. Allerdings tauscht du gar nicht zwei Klassen gegeneinander aus, sondern setzt für beide Status dieselbe. Außerdem musst du this.className = '…' notieren, da »class« in JavaScript ein <http://de.selfhtml.org/javascript/sprache/reserviert.htm@title=reserviertes Wort> ist und die Eigenschaft daher http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=className genannt wurde.

Das ließe sich jetzt natürlich noch verbessern, z.B. indem das JavaScript ausgelagert wird, aber das Prinzip bleibt dasselbe.

Das placeholder-Attribut kennst du, oder? Die neueren Browser haben diese Funktionalität schon eingebaut, d.h. es ist kein JavaScript mehr nötig.

Grüße,
Mathias