Textfeld-Inhalt bei Fokus löschen

Man kann es recht oft bei Anmeldeformularen beobachten: In einem Input-Textfeld steht “Benutzername”, doch sobald man das Feld fokussiert bzw. in es hinein klickt, verschwindet der Inhalt, um Platz für die Benutzereingabe zu schaffen.

Diese Verhaltensweise des Browsers kann mit JavaScript geschaffen werden.

Beispiel für ein Input-Feld, welches bei Fokus seinen vordefinierten Inhalt verliert:

<input type="text" name="username" value="Benutzername" onfocus="if (this.value == 'Benutzername') this.value = ' ';"  />

Was passiert? – Wenn man das Feld fokussiert (onfocus-EventHandler), wird geprüft, ob der Standardwert gesetzt ist. Sollte dies der Fall sein, wird der Inhalt gelöscht.

Als Erweiterung könnte man den vordefinierten Wert des Feldes wieder anzeigen lassen, sollte das Feld leer sein, wenn es den Fokus verliert:

<input type="text" name="username" value="Benutzername" onfocus="if(this.value == 'Benutzername') this.value = '';"  onblur="if(this.value == '') this.value = 'Benutzername';" />

Dieser Artikel wurde vertaggt mit , , , , , , , , .
Kategorien: HTML, JavaScript, Webdesign

Hat Ihnen dieser Artikel gefallen? - Dann abonnieren Sie vlblog um über neue Themen rund ums Web informiert zu werden.

Hinterlasse eine Antwort