Anzeige
Tutorialbeschreibung

jQuery - Eingabefelder beim Fokussieren leeren

jQuery - Eingabefelder beim Fokussieren leeren

Besonders die Ereignisbehandlung ist in jQuery äußerst gelungen und ermöglicht ansprechende Anwendungen. Kein Wunder, schließlich lassen sich alle möglichen Events abfragen. In diesem Tutorial wird eine typische Event-Anwendung gezeigt. Dabei geht es um Eingabefelder, die einen vordefinierten Beispieltext besitzen. Klickt ein Anwender nun in eines dieser Felder oder bekommt ein Feld auf eine andere Art den Fokus zugewiesen, wird es geleert. Danach können in die Felder wie gewohnt die gewünschten Texte eingetragen werden.


Auf vielen Webseiten findet man Eingabefelder, die mit Texten vorbelegt sind. Ganz typisch ist das z.B. für Suchfelder. Eines dieser speziellen Eingabefelder finden Sie übrigens auch auf den Seiten von Psd-Tutorials.de.

Bilder



 
Auf Psd-Tutorials.de ist das Suchfeld mit dem Wert Suchen vorbelegt. So weiß man gleich, wofür das Feld da ist. Wird nun in dieses Feld geklickt, verschwindet das Wort Suchen. Jetzt kann man seinen eigenen Suchbegriff eintragen und die Suchfunktion auslösen. Ähnliche Anwendungen gibt es auch für Formulare. Dort können sie den Besuchern beim korrekten Ausfüllen der Formulare behilflich sein.
[Beispiel anzeigen]

Bilder



 
Um Formularfeldern vordefinierte Werte hinzuzufügen, wird das value-Attribut verwendet. Diesem Attribut weist man als Wert das zu, was letztendlich angezeigt werden soll. Eine typische Formulardefinition könnte dann also folgendermaßen aussehen:
<pre>
Vorname: <input type="text" class="feld" value="Ihr Vorname" />
Name:    <input type="text" class="feld" value="Ihr Nachname" />
E-Mail:  <input type="text" class="feld" value="Ihre E-Mail-Adresse" />
</pre>

In diesem Beispiel sind die Eingabefelder allerdings noch statisch. Denn die vordefinierten Werte werden zwar wie gewünscht angezeigt, sie sind allerdings auch dann noch sichtbar, wenn man in die Felder klickt. Genau das wird durch die jQuery-Skripte, die in diesem Tutorial vorgestellt werden, geändert. Auch hier werden die vordefinierten Texte zunächst angezeigt.
[Beispiel anzeigen]

Bilder



 
Bekommt nun eines der Felder allerdings den Fokus – dabei spielt es übrigens keine Rolle, ob durch Anklicken oder z.B. durch die Tabulatortaste – verschwindet der vordefinierte Text. Trägt man nichts in das Feld ein und verlässt es wieder, wird wieder der ursprüngliche Wert angezeigt.

Bilder



 
Das ist für Suchfelder praktisch, eignet sich aber natürlich auch für Formulare. Das Besondere an den in diesem Tutorial vorgestellten Lösungen: Sie lassen sich auf beliebig viele Eingabefelder anwenden und eignen sich somit gerade auch für sehr umfangreiche Formulare.

Nachdem die Formularfelder definiert sind, muss jQuery eingebunden werden.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>b
<script type="text/javascript">
/* <![CDATA[ */
  google.load("jquery", "1.3.2");
/* ]]> */
</script>

Weiter geht es mit dem eigentlichen Skript, das hier zunächst in voller Länge gezeigt wird.
[Beispiel anzeigen]
<script type="text/javascript">

/* <![CDATA[ */
$(document).ready(function() {
   $(".feld").each(function(){
   var wert = $(this).val();
   $(this)
     .focus(function(){
     if ($(this).val() == wert) {
        $(this).val("");
     }
     })
   .blur(function(){
    if ($(this).val() == "") {
       $(this).val(wert);
    }
    });
   });
});
 /* ]]> */
</script>

Durch die Anweisung
$(".feld").each(function()

wird die hier verwendete each()-Funktion für jedes feld-Element ausgeführt. Um den Wert des value-Attributs der Variablen wert zu übergeben, wird die folgende Syntax verwendet:
var wert = $(this).val();

Über var deklariert man die lokale Variable wert. Da diese Anweisung innerhalb von each() definiert wurde, wird sie auf alle im DOM vorhandenen Eingabefelder, die die Klasse feld besitzen, angewendet. Als Event-Handler werden blur() und focus() verwendet.
  • focus() – Wird ausgelöst, wenn dem Element der Fokus zugewiesen wird. Das kann durch Anklicken des Elements oder durch Setzen des Cursors in das Feld über die Tabulatortaste geschehen.
  • blur() – Wird ausgelöst, wenn das Element den Fokus verliert.

Sobald im vorliegenden Beispiel eines der beiden Ereignisse eintritt, wird überprüft, ob der eingegebene Text den innerhalb der input-Elemente angegebenen value-Werten entspricht. Über val() bestimmt man letztendlich den angezeigten Inhalt der Eingabefelder. Dadurch wird u.a. erreicht, dass – sollte z. B. von den Besuchern zwar der Fokus auf ein Feld gesetzt, dort aber nichts eingetragen worden sein – wieder der ursprüngliche Feldwert gesetzt wird. (Wobei der ursprüngliche Feldwert der ist, der über value im HTML-Code zugewiesen wurde.)

Übrigens funktioniert die Syntax nicht nur bei einzeiligen Eingabefeldern. Auch textarea-Elemente lassen sich mit der gezeigten Funktionalität ausstatten.
<textarea name="textarea" class="feld" id="textarea" cols="45" rows="5">Ihre Nachricht</textarea>

 
Wichtig ist lediglich, dass im vorliegenden Beispiel die Klasse feld angegeben wird.
[Beispiel anzeigen]

Bilder



In jQuery 1.4 wurden – neben zahlreichen anderen Neuerungen – zwei zusätzliche Events eingeführt:
  • focusin()
  • focusout()

Beide Events "bubbeln", ermöglichen also das sogenannte Event-Bubbling. Dabei wird immer zuerst das innere Element ausgelöst. Dieses innere Element ist immer das, das am weitesten von der Dokumentwurzel entfernt ist. Hat dieses Objekt das angegebene Ereignis verarbeitet bzw. kennt es den Event-Handler nicht, reicht es das Event an das nächsthöhere Element weiter. Genau daher rührt auch der Begriff bubbeln. Denn das Ereignis steigt – vergleichbar mit einer Luftblase – bis zur Dokumentwurzel, die im DOM bekanntermaßen durch das windows-Objekt repräsentiert wird.

 
Um die neuen Events nutzen zu können, muss jQuery 1.4x eingebunden werden. Diese neueste jQuery-Version steht bereits in der Google AJAX Library zur Verfügung. (Alternativ dazu können Sie die 1.4er-Version aber natürlich auch von der jQuery-Webseite herunterladen und lokal einbinden).
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
 /* <![CDATA[ */

   google.load("jquery", "1.4");
 /* ]]> */
 </script>

Am Skript selbst ändert sich dann nicht viel. Im vorliegenden Beispiel werden lediglich die beiden zuvor verwendeten Event-Handler focus() und blur() durch focusin() und focusout() ersetzt. Das Skript sieht dann insgesamt folgendermaßen aus:
[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
    $(".feld").each(function(){
    var wert = $(this).val();
    $(this)
       .focusin(function(){
          if ($(this).val() == wert) {
                                    $(this).val("");
                                 }
                   })
                   .focusout(function(){
          if ($.trim($(this).val()) == "") {
             $(this).val(wert);
                                 }
                   });
    });
 });
  /* ]]> */
 </script>

An der eigentlichen Funktionsweise des Skripts hat sich augenscheinlich nichts geändert. Denn in der Tat sind diese Ereignisse größtenteils mit focus() und blur() identisch. Allerdings wurden sie ohnehin hauptsächlich deswegen geschaffen, um Entwicklern das Schreiben eigener Events zu erleichtern.

 
Übrigens: Wer eine solche Anwendung ohne jQuery entwickeln möchte, kann das sehr einfach erledigen. Dafür reichen einige wenige JavaScript-Anweisungen völlig aus. Das folgende Beispiel zeigt, wie sich so etwas auf herkömmlichem JavaScript-Weg realisieren lässt:
[Beispiel anzeigen]
<form>
 <input name="username" value="Ihr Name"
   onfocus="if(this.value==this.defaultValue)this.value='';"
   onblur="if(this.value=='')this.value=this.defaultValue;" />
 </form>

Das funktioniert in dieser Form tadellos.


Fazit

Mit jQuery lassen sich die Werte von Eingabefeldern sehr einfach ermitteln und neu setzen. Hilfreich können die gezeigten Skripte vor allem dann sein, wenn bei Formularfeldern nicht offensichtlich ist, was eingetragen werden soll. Allerdings sollte man es mit dem Vorbelegen von Eingabefeldern auch nicht übertreiben, da vor allem umfangreiche Formulare dann sehr schnell chaotisch bzw. unübersichtlich wirken können.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von HiGhDeNsItY
  • 04.03.2010 - 10:03

Interessante Lösung, gerade für umfangreichere Formulare bietet sich dies an.

Portrait von TTJanis
  • 03.03.2010 - 21:24

finde ich eine gute Hilfe - sieht man häufig auf Webseiten und ich hatte bis jetzt noch keine Ahnung wie ich das erreichen konnte - danke

Portrait von Anke1234
  • 23.02.2010 - 14:21

Danke sehr hilfreich.

x
×
×