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

Hilfetext bei Eingabefeldern



Nehmen wir mal an, wir haben folgendes Eingabefeld:
Code:
<input name="normal" type="text" value="so siehts normal aus">

Dies wäre ein Eingabefeld, das jeden normalen User erstmal stört, da man den kompletten vorgegenene Text (so siehts normal aus) erstmal von Hand löschen muss. Um diesen gezwungenermaßen notwendigen Vorgang Abhilfe zu verschaffen, erweitern wir das Input-Feld um einen onFocus Event. Das heißt, sobald das Feld fokusiert wird (aktiv wird), wird das Event ausgeführt, in diesem Fall wird die vorher angegebene Hilfe gelöscht:
Code:
<input name="normal" type="text" id="normal" value="so siehts normal aus" onFocus="this.value=''">

Jetzt haben wir allerdings folgendes Problem: Wenn der User sich vertippt und das Feld erneut fokussiert, muss er nochmal alles eingeben, was gerade bei Textareas mit langen Texten eine mühsame Arbeit sein kann, die sich nicht jeder macht.
Die Lösung ist zwar ein bisschen kompliziert, aber die kleine Komplikation lohnt, um sich später Ärger zu ersparen:
Code:
<input name="normal" type="text" id="normal" value="so siehts normal aus" onFocus="if(this.value=='so siehts normal aus')this.value=''">

Wir haben nun in das onFocus-Event eine if-Abfrage eingebaut, die überprüft, ob der Text im Input-Feld noch der Ursprungstext (so siehts normal aus) ist oder ob es ein anderer ist. Wenn es erstgenannter noch ist, wird das Input geleert für den neuen Text, ansonsten passiert nichts.

Eine weitere kleine und feine Erweiterung ist folgende:
Nehmen wir an, ein User navigiert sich erstmal mit der Tabulator-Taste durch das Formular. So verschwinden sämtliche Hilfen in den Inputs. Deshalb versehen wir das Eingabefeld zusätzlich noch mit einem onBlur-Event, dass das Gegenteil von onFocus ist (d.h., wenn es verlassen wird):
Code:
<input name="normal" type="text" id="normal" value="so siehts normal aus" onFocus="if(this.value=='so siehts normal aus')this.value=''" onBlur="if(this.value=='')this.value='so siehts normal aus'">

Nun bekommt das Input-Feld beim Verlassen des Feldes wieder den ursprünglichen Wert (so siehts normal aus) zugewiesen, vorrausgesetzt das Formularfeld ist leer.

Wichtig ist auf jeden Fall, bei der Formularprüfung z.B. mit PHP nicht nur prüfen ob die Eingabe leer ist sondern auch, ob die Eingabe dem Hilfetext des Eingabefeldes ist.

Demo: *klick*

PS: so siehts dann aus müsst ihr natürlich immer mit eurem Hilfetext, Beispiel oder sonst was ersetzen.

Geschrieben von michi am 18.06.2004 (7591x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

<input name="normal" type="text" id="normal" value="so siehts normal aus" onFocus="if(this.value==this.defaultValue)this.value=''">



so dürfte es effizenter aussehen, man muß den Text nicht soppelt eingeben, man vergleicht es mit dem Default!
Geschrieben von René