201028Jan

jQuery-Tutorial: Eingabefelder bei Fokus leeren

Mit jQuery können schnell und relativ einfach Ereignisse (Events) abgefragt und mit Funktionen belegt werden. Eine beliebte Funktionalität stellen so auch Eingabefelder dar, die mit einem vordefinierten Beispieltext gefüllt sind und bei einer Aktivierung (Fokus) geleert werden — anschließend kann das leere Feld mit Benutzereingaben gefüllt werden. Dies findet sich häufig in Suchfeldern oder Kontaktformularen wieder.

Eingabefelder

In diesem Tutorial will ich die Schritte beschreiben, die in jQuery notwendig sind, um eine derartige Funktionalität zu entwickeln. Hierfür werden nur wenige Befehle und eine Variable benötigt, weshalb diese kleine Anleitung besonders für Einsteiger interessant sein kann. Eine Besonderheit stellt in der hier vorgestellten Lösung die Wiederverwendbarkeit dar: Die Funktion kann auf beliebig viele Eingabefelder angewendet werden, so dass auch größere Formulare damit ausgestattet werden können.

Ich empfehle zum Experimentieren und Testen von JavaScript- oder jQuery-Code stets JS Bin. Das HTML-Grundgerüst von JS Bin kann zum Großteil bestehen bleiben. Lediglich der body-Bereich wird um folgenden Code ergänzt:

  • Quelltext
  • <input type="text" class="eingabefeld" value="Text1" />
  • <input type="text" class="eingabefeld" value="Text2" />
  • <input type="text" class="eingabefeld" value="Text3" />

Für eine valide HTML-Struktur sind noch form- und fieldset-Bereiche nötig, auf die ich in diesem Fall verzichtet habe, da es um die Kernfunktionen des jQuery-Codes geht.
Die jQuery-Bibliothek kann in JS Bin per Knopfdruck eingebettet werden. Alternativ gibt es nun bei den Google AJAX Libraries APIs auch die Möglichkeit, die aktuelle Version von jQuery zu laden. Der Pfad hierfür wäre:

  • http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Nun kann die Eingabe von JavaScript-Code erfolgen. Folgendes Snippet kann zu Beginn eingefügt werden:

  • Quelltext
  • $(".eingabefeld").each(function(){
  • console.log($(this).val());
  • });

Mit diesem Beispiel soll die "each()"-Funktion von jQuery veranschaulicht werden. In der Konsole (JS Bin oder Firebug) werden die Werte (value) der einzelnen Eingabefelder angezeigt. In einer each()-Funktion werden die referenzierenden Elemente also mit dem Selektor "$(this)" angesprochen. Die Attribut-Funktion "val()" gibt den value-Wert eines DOM-Elements aus. Mit "val(wert)" können zudem neue Werte geschrieben werden, was später der Fall sein wird.
Die Zeile mit der Konsolenausgabe "console.log" wird nun durch Folgende ersetzt:

  • Quelltext
  • $(".eingabefeld").each(function(){
  • var wert = $(this).val();
  • });

Hiermit wird lediglich der Variable "wert" der Inhalt des value-Attributs übergeben. Mit dem Schlüsselwort "var" wird an dieser Stelle eine lokale Variable definiert — dies ist wichtig und bedeutet, dass jedes mit der "each()"-Funktion angesprochene DOM-Element (in diesem Fall also 3 input-Objekte) eine eigene (lokale) Variable "wert" sowie den entsprechenden Wert erhält. Ohne "var" wäre die Variable "wert" global und würde durch den Aufruf von "each()" überschrieben werden. Das hätte zur Folge, dass lediglich der letzte Wert gespeichert werden würde, in unserem Fall also "Text3".

Die Variable dient als Zwischenspeicher des bestehenden Eingabetextes. Der Text soll nur dann wiederhergestellt werden, wenn die Benutzereingabe keinen Inhalt (Zeichen) hat. Zum Einsatz kommen im folgenden Beispiel die Event-Funktionen "focus()" und "blur()". Das "blur()"-Ereignis tritt ein, sobald ein Eingabefeld den Fokus verliert (zum Beispiel durch TAB oder einen Mausklick). Der komplette und finale Code sieht anschließend so aus:

  • Quelltext
  • $(".eingabefeld").each(function(){
  • var wert = $(this).val();
  •  
  • $(this)
  • .focus(function(){
  • if ($(this).val() == wert) {
  • $(this).val("");
  • }
  • })
  • .blur(function(){
  • if ($(this).val() == "") {
  • $(this).val(wert);
  • }
  • });
  • });

Die Befehle dürften selbsterklärend sein: Es werden bei dem Eintreten der beiden Events "focus" und "blur" einfache Kontrollabfragen durchgeführt, die überprüfen, ob es sich bei der Benutzereingabe um den vordefinierten Wert (also "Text1", "Text2" oder "Text3") oder eine leere Zeichenkette handelt. Die "val()"-Funktion wird bei der Überprüfung als Lese-Funktion (ohne Parameter) und bei dem Einstellen des neuen Wertes als Schreib-Funktion (mit Parameter) genutzt.

Ab jQuery 1.4 stehen unter Anderem die beiden Event-Funktionen "focusin()" und "focusout()" zur Verfügung. Diese können ebenfalls für diesen Zweck genutzt werden. Weiterhin bietet sich die Verwendung von "trim()" an, so dass auch die Eingabe von Leerstellen als leere Zeichenkette gewertet wird. Eine Abwandlung des Codes könnte dann so aussehen:

  • Quelltext
  • $(".eingabefeld").each(function(){
  • var wert = $(this).val();
  •  
  • $(this)
  • .focusin(function(){
  • if ($(this).val() == wert) {
  • $(this).val("");
  • }
  • })
  • .focusout(function(){
  • if ($.trim($(this).val()) == "") {
  • $(this).val(wert);
  • }
  • });
  • });

Viel Spaß beim Experimentieren mit jQuery und weiteren Funktionen!

Kommentarfunktion für diesen Artikel geschlossen.