JQuery: Leere Felder mit Standardtext belegen

Ansprechende Kontaktformulare oder aber ganz allgemeine Formulare wirken selbsterklärend, wenn die Textfelder mit beschreibenden Werten oder Texten vorbelegt sind. Bei einem Kontaktformular, welches die drei Felder Name, E-Mail und Nachricht beinhaltet, können die Felder zum Beispiel die Phrasen „Ihr Name“, „Ihre E-Mail-Adresse“ sowie „Ihre Nachricht“ als Standardwerte haben. Bei einem Klick in ein Feld sollte der jeweilige Standardtext verschwinden, sodass der Nutzer das Textfeld mit seinen eignen Text befüllen kann. Falls das Feld aber nun leer bleibt und der User in einen anderen Bereich klickt, sollte der Defaulttext wieder erscheinen.

Wie so oft bei solchen Interaktionen kann das Ganze mit der clientbasierten Sprache Javascript umgesetzt werden. In diesem Beispiel wird das JQuery-Framework verwendet. Das ganze kann selbstverständlich auch ohne Framework umgesetzt werden.

Beim Aufruf der Seite sollten die value-Attribute der input-Elemente als Wert bereits den jeweiligen Standardtext haben. Für das Textfeld zur Eingabe der E-Mail-Adresse sieht es dann zum Beispiel so aus:

Dem input Element haben wir eine id zugeordnet. Die id des Elements nutzen wir als Wert für den Selektor in unserem JQuery-Script. (Zur Anmerkung: Die Vergabe einer id ist nicht unbedingt notwendig, da man auch den Elementtypen mit name-Attribut und Wert „email“ als Selektor nehmen könnte. Ich denke, dass es mit der angegebenen id für viele verständlicher sein könnte.)

Unser JQuery Script würde dann folgendermaßen aussehen:

Es gibt zwei Events, die abgefragt werden, nämlich blur und focus. Der Event blur tritt ein, wenn ein Element nicht mehr aktiv ist, also den fokusierten Zustand verliert. Das wäre der Fall wenn der Zeiger im Textfeld blinkt und man in außerhalb des Felds mit der Maus klickt. Der Event focus ist genau das Gegenteil, nämlich wenn das Textfeld fokusiert wird, d.h. man in das input-Feld klickt, um eine Eingabe zu machen.

1.) Funktion bei blur

Als Funktion wird eine einfach Abfrage gemacht. Wenn das Textfeld weiterhin leer ist, dann soll das value-Attribut des Textfelds mit dem Wert „Ihre E-Mail-Adresse“ befüllt werden.

2.) Funktion bei focus

Beim Klicken in das Feld muss abgefragt werden, ob nicht bereits vom Nutzer geschriebener Text vorhanden ist. Dieser sollte natürlich nicht überschrieben werden bzw. gelöscht werden. Nur wenn das Feld den Text „Ihre E-Mail-Adresse“ aufweist, kann das Element für eine Nutzereingabe geleert werden.