Tutorial-Steckbrief

jQuery - Eingabefelder beim Fokussieren leeren

jQuery - Eingabefelder beim Fokussieren leeren

23.02.2010 in Javascript-Frameworks von daniel_koch

  • Kategorie: Javascript-Frameworks
  • Erstellt mit Programmversion: 1.4
  • Kompatibel ab Programmversion: .
  • Dateigröße (PDF): 1.3 MB
  • Bisherige Zugriffe: 2518
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.
Zum Downloadmanager hinzufügen PDF-Datei herunterladen (1.3 MB)

Über den Autor

Portrait von daniel_koch

daniel_koch

Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2.450 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 800 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1.000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, hoffen wir natürlich, dich als neues Mitglied unserer Kreativ-Community begrüßen zu dürfen.

Gratis-Lern-DVD mit 11 Stunden Video-Training

Als Mitglied bekommst du die PSD-Tutorials.de - Selection-DVD mit über 11 Stunden Video-Trainings als Willkommensgeschenk gratis- Downloadlink gibt es in deinem Profil (Kontrollzentrum).

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Tutorial empfehlen

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)

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.
vBulletin 0.065 • ZF-App 0.39 • Total 0.454