Moin,

ich dachte mir als erstes tutorial zeige ich mal wie man mithilfe von Javascript(jQuery) eine Beschriftung in eingabe feldern anzeigen lässt, die beim fokussieren automatisch verschwindet. Das ganze lässt sich auch mit reinem javascript machen, aber ich persönlich arbeite lieber direkt mit jQuery da es einiges erleichtert, deshalb werd ich es in diesem Tutorial auch machen.

Ein beispiel wie es nachher aussehen könnte findet ihr hier: dl.maddin.cc/easy-scripting/be…g_von_eingabefeldern.html.

Als erstes brauchen wir natürlich ein eingabefeld. Dafür nehme ich erstmal ein eingaches input feld

value ist der Text der angezeigt wird, solange wir noch nciths eingenes eingegeben haben. Also genau das, was verschwindet wenn wir das feld anklicken.
id ist die id über die wir das eingabefeld identifizieren und ansprechen
und name ist der name des feldes, den mach braucht um die daten zu verarbeiten die beim absenden übergeben werden.
In meinem beispiel sind name und id gleich, das ist aber nicht relevant. Es geht nur darum, das die id einzigartig in diesem Dokument ist, damit es keine Konflikte mit anderen Elementen gibt.

So, nun wollen wir ja auch das der text verschwindet wenn wir es anklicken. Dafür benötigen wir JS.
Bei JS geht es genau wie bei CSS entweder direkt im Dokument, oder aber in einer externen JS Datei. Bei größeren JS klassen etc. ist es ratsam das ganze in extra Dateien zu machen, bei dem bisschen was wir hier brauchen reicht es aber wenn wir es ins Dokument schreiben.
Natürlich brauchen wir erstmal jQuery. Dafür setzen wir folgenden code in den head bereich:

Und darunter schreiben wir unseren code.
Dafür müssen wir erstmal den script tag benutzen, damit der Browser weiss das der code der sich darin befindet kein html sondern javascript code ist.


Und nun zum eigenen Code.
Als erstes benutzen wir folgenden code:

Der bewirkt, das der inhalt erst ausgeführt wird, wenn das Dokument fertig geladen ist.
Nun wollen wir unser element ansprechen. Das geht per

#ipAdresse ist die ID des elementes. Wenn ihr dem element eine andere id gegeben habt, müsst ihr das hier natürlich auch ändern. Die raute vor der id sagt einfach nur aus, das wir mit einer id arbeiten und nicht z.b mit einer klasse. Das ganze ist ähnlich wie CSS, bei dem man die ID per #name und die Klasse per .name anspricht. Gleiches gilt hier eben auch, alternativ könnten wir ein element per ansprechen. Hierbei muss man aber bedenken, das eine Klasse im normalfall auf mehrere elemente zutrifft, und wir ja nur ein bestimmtes wollen. Aber ich drifte ab...^^

So. Wir wollen ja, das der test beim anklicken verschwindet, damit wir unseren eigenen eingeben können. dafür gibt es so genannte events. Das ganze geht recht einfach, und zwar so:

Und wir wollen ja, das der text dann verschwindet.

Hier sehen wir einmal $(this). Wer schonmal mit Objekt orientierter Programmierung zutun hatte wird das sicherlich bekannt vor kommen. Ist hier allerdings etwas anders. Wir sind hier innerhalb des events von $('#ipAdresse'), weshalb wir genau das mit $(this) ansprechen können. Also heisst $(this), in unserem falle, genau das gleiche wie $('#ipAdresse').

Dann haben wir noch val(''). val steht für value, und wird benutzt um entweder den wert des elements zu bekommen, oder zu setzen. Innerhalb der Klammern von val steht der Wert den wir setzen möchten, in unserem fall also ein leerer string (auch bekannt als nichts^^).

So, nun wird beim fokkusieren der text entfernt. Da gibts aber ein Problem: Angenommen wir schreiben dann unseren eigenen text rein, und fokussieren es erneut, wird dieser auch wieder gelöscht. Und da das nicht sinn der sache ist, machen wir eine einfache abfrage, ob der wert der drin steht der ist, den wir am anfang bestimmt haben.

Eventuell fragt sich jetzt jemand, warum val() sowohl zum abfragen auch auch zum setzen des textes benutzt wird. Das ist relativ simpel: Solange innerhalb der klammer nichts steht, wird der wert zurück gegeben.

Theoretisch wars das jetzt schon. Aber wir gehen einfach noch einen schritt weiter: Wenn nichts in dem eingabefeld steht, und man etwas anderen anklickt bzw dieses nicht mehr fokussiert, soll wieder "Bitte ip eingeben..." drin stehen.
Das geht folgendermaßen (da es relativ gleich mit dem ist was wir vorher gemacht haben, kommentier ich es einfach im code):


Natürlich könnten wir jetzt noch ein wenig mit CSS rum spielen, und z.b dem text ein leichtes grau geben bzw die klassen wechseln beim fokussieren etc., aber ich belasse es erstmal hierbei.
Wie oben schon erwähnt, wie es am ende aussieht findet ihr hier: test.m4ddin.de/jquery-form.html.

Fragen, Kritik, Flames oder Liebesbriefe einfach als Kommentar

Mfg.

Das ganze geht übrigens auch viel kürzer, durch das HTML5 placeholder Attribut.

Aber hey, so wisst ihr wenigstens auch wie man's über den umständlichen Weg macht