Form-Markup erhalten:
var textarea = $('textarea');
$('
Noch 10 Zeichen
').insertBefore(textarea);
textarea.maxlength();
Diskussion
Bei Twitter kann man in der Textarea mehr als 140 Zeichen eingeben, die Form dann aber nicht abschicken. Das ist hilfreich, wenn man einen längeren Text einfügt, der die Grenze überschreitet, um ihn danach anzupassen. Einen ähnlichen Effekt erhält man beim Maxlength-Plugin, wenn man die Option
hardLimit
auf
false
setzt. Dies beeinflusst zwar nicht das Abschicken des Plugins, aber es kann an anderer Stelle behandelt werden – zum Beispiel vom Validation-Plugin (siege Forms überprüfen ).
Das Plugin ermöglicht auch das Zählen von Wörtern anstelle von Zeichen, indem die Option
words
auf
true
gesetzt wird.
Anstatt das Plugin nach dem Standard-Selektor
.charsLeft
suchen zu lassen, können wir auch die Option
feedback
setzen.
Hier ein weiteres Beispiel, das alle drei Optionen nutzt:
$('textarea').maxlength({
feedback: "p>span",
hardLimit: false,
words: true
});
Label oberhalb von Eingabefeldern anzeigen
Problem
Ein Seitenlayout bietet nicht ausreichend Platz vor einem Eingabeelement, um ein Label anzuzeigen. Die Funktion des Feldes ist nicht sofort klar und ein Titel alleine ist nicht deutlich genug.
Such- und Anmelde-Forms haben häufig Platzprobleme. Es gibt nicht ausreichend Fläche, um ein Label vor einem Eingabefeld anzuzeigen. Aber ohne Label ist die Funktion des Feldes nicht klar. Ein Attribut
title
reicht nicht aus, um das Problem zu beheben, da man es nur dann sieht, wenn man den Mauscursor über das Feld bewegt und dort verweilt.
Lösung
Der häufige Fall des Suchfeldes kann gelöst werden, indem man innerhalb des Feldes in hellgrau »Suchbegriff« einträgt, um zu zeigen, dass es sich bei diesem Text nur um ein Label, nicht um den tatsächlich zu suchenden Text handelt. Fokussiert man das Feld, dann wird der Text entfernt. Verlässt man es, so kehrt der Text zurück, sofern nicht etwas eingegeben wurde.
Der etwas seltenere Fall ist eine Anmelde-Form, die nicht viel Platz bietet und Felder für den Benutzernamen und das Passwort enthält. Das Passwort-Feld muss das »Wasserzeichen« als normalen Text anzeigen, das Passwort selbst aber (direkt eingetippt oder vom Browser vorbefüllt) muss »verschleiert« sein.
In beiden Fällen sollte das Wasserzeichen nicht als Wert an den Server geschickt werden. Das Watermark Plugin löst dieses Problem, indem es oberhalb des eigentlichen Eingabefeldes ein Label-Element anzeigt, das Label verbirgt, wenn das Eingabefeld den Fokus erhält, und es wieder anzeigt, wenn das leere Feld verlassen wird.
Mit einem Label über dem Feld anstelle des Anzeigens von Text innerhalb des Feldes funktioniert diese Lösung auch bei Passwort-Feldern und man vermeidet, den Wasserzeichen-Wert löschen zu müssen, bevor man die Form abschickt.
Die Standardversion nutzt die Plugin-Methode
watermark
und übergibt den anzuzeigenden Wert:
$("#search").watermark("Suchbegriff");
Diskussion
Anstatt einen Wert an das Plugin zu übergeben, kann dieser auch bei Verwendung des Metadata-Plugin als Metadaten-Eintrag im Markup angegeben werden, was praktischer ist, wenn mehrere Wasserzeichen genutzt oder diese auf dem Server generiert werden:
$("#loginform input").watermark();
Metadaten haben den Nachteil, dass damit keine progressive Verbesserung möglich ist. Dabei sollten Label-Elemente wie für eine normale Form verwendet werden, wobei das Plugin sie an der richtigen Position platziert:
In diesem Fall wird das Plugin auf die Label angewendet anstatt auf die Eingabefelder:
$("#loginform label").watermark();
Das Plugin nutzt dann das Attribut
for
für jedes Label, um das zugehörige Eingabefeld zu finden und das Label an der richtigen Position
Kostenlos Online Lesen 
