In diesem Tutorial geht es darum, wie man den Standardwert eines Inputs beim Fokusieren ausblendet und anschließend wieder einblendet. Das Endergebnis sieht folgendermaßen aus:
Zuerst müssen wir das Inputfeld erzeugen. Das geht über diese kleine Zeile:
<input type="text" value="Standardwert" />
Ausgabe:
Wir erzeugen eine Eingabe des Typs (type) “text” mit dem Standardwert (value) “Standardwert”. Wenn man nun das Eingabefeld auswählt bleibt der Standardwert stehen. Um nun den Standardwert beim Auswählen auszublenden und danach wieder einzublenden, muss man auf Javascript zurückgreifen. Der Code sieht folgendermaßen aus:
<input type="text" value="Standardwert" onfocus="if(this.value==this.defaultValue){this.value='';}" onblur="if(this.value==''){this.value=this.defaultValue;}" />
Ausgabe:
Der Typ und der Standardwert bleiben bestehen und wir fügen weitere Werte hinzu:
- onfocus: Beim fokusieren/ auswählen des Eingabefelds wird ein Funktion durchgeführt. Zuerst wird die Value des Eingabefelds (if(this.value==) auf die Übereinstimmung mit Standardwert (this.defaultValue) geprüft. Ist dies der Fall, wird die Value des Eingabefelds (this.value) zu einem leeren Wert (=’’) geändert.
- onblur: Beim Fokusieren eines anderen Obekts wird ebenfalls eine Funktion durchgeführt, die genauso aufgebaut ist, wie die obere. Zuerst wird die Value des Eingabefelds auf seine Leere überprüft (if (this.value==’’). Trifft die Bedingung zu, wird die Value wieder auf seinen Standardwert zurückgesetzt (this.value=this.defaultValue).
Sinnvoll ist die Verwendung dieses Effekts, um bei Formularen den Standardwert nicht entfernen muss, sondern dieser automatisch beim Fokusieren des Eingabefelds verschwindet.