Zeichen zählen in Textfeldern
Heute etwas abseits der gewohnten Pfade eine Anleitung für eine JavaScript Funktion. Beim Erreichen der maximalen Anzahl Zeichen wird eine Warnmeldung ausgegeben, bei Korrektur wieder entfernt. Zum Einsatz kommt jQuery.
HTML stellt uns für diese Funktion keine Prüfung zur Verfügung, obwohl sie oft genug sinnvoll wäre: Eine Texteingabemöglichkeit soll nicht mehr als x Zeichen aufnehmen. Man kann natürlich Hinweise daneben schreiben, aber wer zählt schon mit?
Ohne weitere Hilfsmittel hat man nur die serverseitige Prüfung zur Verfügung, um die Länge des eingetragenen Textes zu prüfen und ggf. zu kürzen. Damit wird der Benutzer aber vor eine vollendente Tatsache gestellt, die ihn vielleicht von der geplanten Aktion (Kommentar hinterlassen, Bestellung aufgeben) Abstand nehmen lässt.
Ein kurzes Treffen mit einer Suchmaschine der Wahl bringt dann auch jede Menge Treffer zum Vorschein, wie man mittels JavaScript eine Textarea überwacht und mit verschiedensten Massnahmen dem Benutzer die Rückmeldung gibt, er möge sich doch bitte kurz fassen. Warum schreibe ich nun noch eine weitere? Mein Problem umfasst zwei Eckpunkte: die Seite, die die Prüfung erhalten sollte, realisiert andere Funktionen bereits mit dem Framework jQuery und es gibt innerhalb eines Formulares mehrere zu überwachende Textboxen. Also musste ich eine Lösung finden, die auf jQuery beruht und Formularelemente einzeln identifizieren kann.
Nach viel Sucherei, etwas professioneller Hilfe und Ausprobieren kam dies dabei heraus:
<script type="text/javascript">
<!--
function checkLen(size, field) {
var $element = $(field);
if ($element.val().length > size && !$element.hasClass('tomanychars')) {
$('<div class="error">Bitte maximal ' + size + ' Zeichen eingeben!
Überschüssige Zeichen werden abgeschnitten.</div>').insertBefore($element);
$element.addClass('tomanychars');
} else if ($element.val().length <= size && $element.hasClass('tomanychars')) {
$element.siblings('.error').remove();
$element.removeClass('tomanychars');
}
}
//-->
</script>
Dies ist die JavaScript-Funktion, die vor dem Formular eingebunden werden muss. Sie kann sowohl im head der Seite als auch im body hinterlegt werden.
Für jedes Textfeld des Formulars muss folgender Zusatz im öffnenden textarea hinzugefügt werden:
onkeyup="checkLen(300,this)"
Die 300 steht hier für die Anzahl der erlaubten Zeichen im Element.
Nach dem Einbau wird überwacht, wieviele Zeichen eingegeben werden. Wird die Höchstzahl überschritten, erscheint ein Element mit einer Warnmeldung vor dem Eingabefeld. Werden die Zeichen reduziert und die Höchstmenge unterschritten, verschwindet die Meldung wieder.
