Anzahl der geschriebenen Zeichen mit jQuery zählen

Bei der Nutzung von Formularen kann es hilfreich sein, dem Anwender anzuzeigen wie viele Zeichen er bereits eingegeben hat. In vielen Layouts gibt es beispielsweise eine ideale Textmengen für bestimmte Elemente, die möglichst eingehalten werden soll. Auch spielt die Anzahl der verfassten Zeichen für verschiedene Abrechnungsmodelle eine Rolle.
In diesem Beitrag archivieren wir ein jQuery-Snippet, mit dem die Anzahl der eingegebenen Zeichen angezeigt werden kann.
Workshops & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
In <textarea>
geschriebene Zeichenzahl anzeigen
Mit folgendem jQuery-Snippet lässt sich die Anzahl der Zeichen anzeigen, die der Anwender in einem bestimmten Bereich – in diesem Fall in einer <textarea>
– geschrieben hat. Der Bereich wird über die CSS-Klasse .character-limit
definiert. Jedes Mal, wenn der Anwender eine Taste auf der Tastatur loslässt (.keyUp
) wird die Anzahl der geschriebenen Zeichen gezählt und mittels .html()
-Funktion im Element .counter
aktualisiert. Über eine If/Else-Abfrage wird er Hintergrund der <textarea>
rot eingefärbt, wenn mehr Zeichen eingegeben wurden als in der Variable limit
festgelegt.
$('.character-limit').keyup(function(){
var limit = 20; // Maximale Anzahl an Zeichen
var count = $(this).val().length;
$('.counter').html(count);
if (count > limit) {
$(this).css('background','crimson');
} else {
$(this).css('background','ForestGreen');
}
});
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Das könnte dich auch interessieren
2 Kommentare
Kommentar verfassen
Michael
Verfasst am 6. Juni 2016 um 15:40 Uhr.
Hallo Jonas,
ich finde das Beispiel sehr gut! Es wäre schön, wenn man das jetzt so erweitern könnte, dass die Zahl rückwärts zählt und eine weitere Eingabe beim Erreichen des Limits verhindert. Nur das Löschen sollte dann möglich sein. Was hälst du davon?
Viele Grüße
Michael
René
Verfasst am 12. Februar 2018 um 16:35 Uhr.
Hallo,
wie kann ich das jetzt effektiv nutzen? Ich meine, wo hinterlege ich das Snippet oder wie kann daraus ein PlugIn werden?
LG
Rene