HTML Formulare und onclick/onfocus Ereignisse

Wenn man HTML Formulare auf eine Seite stellt kann es hilfreich sein, Eingabefelder in Voraus auszufüllen. Man kann seinen Besuchern so einen Hinweis darauf geben, welche Daten sie eingeben sollen.

Dies sieht zum Beispiel hilfreich aus:

<form>
	<input onclick="this.value=''" type="text" value="Ihre E-Mail">
</form>

Wenn der Benutzer das Feld anklickt sollte der Hinweis entfernt werden. Dies kann mit mit dem onclick JavaScript Ereignis geschehen:

<form>
	<input onfocus="this.value=''" type="text" value="Ihre E-Mail">
</form>

Unsere Besucher können die Eingabefelder aber auch anders erreichen. Die Tab Taste kann beispielsweise benutzt werden, um zwischen den Feldern zu navigieren. Daher ist das onfocus Ereignis besser für unsere Zwecke geeignet:

<form>
	<input onfocus="this.value=''" type="text" value="Ihre E-Mail">
</form>

Die scheint gut zu funktionieren. Es gibt aber immer noch ein Problem wenn der Besucher seine E-Mail Adresse eingibt, und dann etwas anderes auf unserer Seite liest. Klickt er das Feld dann noch einmal an verschwindet seine Vorherige Eingabe. Um dies zu verhindern überprüfen wir, ob sich der Inhalt des Textfelds geändert hat:

<form>
	<input type="text" value="Ihre E-Mail" onfocus="if (this.value == 'Ihre E-Mail')  {this.value=''}">
</form>

Hier das Beispiel:

Den Ausgangstext wiederherstellen wenn nichts eingegeben wurde

Wunderbar, so weit funktioniert alles. Was passiert aber, wenn unser Besucher das Feld anklickt und dann nichts eingibt? Das Feld bleibt einfach leer. Wenn das Formular keine weiteren Beschreibungen hat kann der Benutzer vergessen haben, welche Informationen in das Feld sollen. Wir umgehen diesen Fall indem wir den ursprünglichen Wert wiederherstellen, wenn das Feld verlassen wird und nichts eingegeben wurde:

<form>
	<input type="text" value="Ihre E-Mail" onblur="if(this.value == '') { this.value='Ihre E-Mail'}" onfocus="if (this.value == 'Ihre E-Mail') {this.value=''}">
</form>

Text beim anklicken auswählen

Bei einigen Eingabefelder kann etwas anderes nützlich sein, beispielsweise den Text auszuwählen. Wenn wir dies tun kann der Besucher den Feldinhalt entweder löschen oder bearbeiten:

<form>
	<input onfocus="this.select()" type="text" value="Vorherige Suche">
</form>

Dynamische Farben

Dies ist ein etwas komplizierteres Thema. Nehmen wir an wir wollen den Hinweistext in einer anderen Farbe haben als die Eingabe des Benutzers. Hier ist ein Weg um dies zu erreichen:

<form>
	<input style="color: #f00" type="text" value="Ihre E-Mail" onblur="if(this.value  == '') { this.style.color='#f00'; this.value='Ihre E-Mail'}" onfocus="if (this.value == 'Ihre E-Mail') {this.style.color='#0f0'; this.value=''}">
</form>

Hier muss man im Auge behalten, dass beim erneuten Laden der Seite Probleme auftreten können. Manche Browser werden vorher vom Benutzer eingegeben Werte automatisch wiederherstellen. Dann haben wir diese Werte jedoch in der falschen Farbe.
Möchte man dies verhindern kann man zu onload oder ähnlichen JavaScript Ereignissen greifen.

4 Kommentare

  1. avatar
    schrieb diesen Kommentar on

    Sehr gut, vielen Dank.
    Genau richtig bin ich auf diese Seite gelandet und habe das bekommen was ich gebraucht habe.

    Internet ist echt genial und die Gemeinde stark, weiter so.

    1. avatar
      schrieb diesen Kommentar on

      Jawohl! Viel Erfolg auch weiterhin!

  2. avatar
    schrieb diesen Kommentar on
    Sehr schöne Übersicht. Danke :)
  3. avatar
    schrieb diesen Kommentar on
    Vielen Dank, das mit den Farben bei der Eingabe war sehr hilfreich, jedoch stockt es nun bei der validierung von der Telefonnummer.... mmm muss ich nochmal auf Fehlersuche gehen.

Eine neue Diskussion eröffnen

Antwort abbrechen
Markdown. Syntaxhervorhebung mit <code lang="php"><?php echo "Hallo, Welt!"; ?></code> etc.