Einfachen Zeichenzähler mit jQuery umsetzen

In den letzten Tagen habe ich viel Zeit mit kleineren Anpassungen an meinem Blog verbracht. Unter anderem gehörte auch die Überarbeitung meines Kontaktformulars dazu. Dabei ist mir aufgefallen, dass bei Nachrichteneingabe zwar die maximale Zeichenanzahl beschränkt wird, der Anwender allerdings nur eine simple Fehlermeldung erhält. Er erfährt nicht, wie viele Zeichen zu viel geschrieben wurden. Daher dachte ich mir, setzt du das Ganze einfach via jQuery um. Im Internet finden sich unzählige Plugins, die aber meist sehr korpulent wirken. Das muss doch einfacher gehen? Ja, geht es. jQuery braucht keinesfalls immer überdimensioniert sein. Ein kleines Snippet tut es manchmal genauso.

Die nachfolgenden zwei Beispiele zählen den Inhalt eines Eingabefelds entweder von ihrem Maximalwert oder beginnend bei Null. Beide Snippets sind identisch aufgebaut. Lediglich die Art und Weise der Zählung ist anders. Einmal wird vom Maximum subtrahiert und im zweiten Fall von Null auf die aktuelle Zeichenanzahl der Textbox hochgezählt. Über die Variable count könnt ihr jeden x-beliebigen Zahlenwert festlegen. Sollte das Ergebnis entweder kleiner Null oder oberhalb des Maximums liegen, so hängt eine einfache Schleife entweder die Klasse overlimit an bzw. ab. Diese kann mittels CSS gestaltet werden. Die Klasse counter gibt entsprechend die getippten bzw. übrigen Zeichen aus. Zu guter Letzt folgen noch zwei Aktionen: keyup, um Eingaben des Nutzers zu bemerken und change damit das aktuelle Ergebnis nach dem neu laden der Seite erhalten bleibt.

Zeichenzähler von max. Wert bis in den Negativbereich

function updateCount() {
    var count = 100 - $('textarea').val().length;
  if(count < 0){
            $('textarea').addClass("overlimit");
        }
        else {
            $('textarea').removeClass("overlimit");
        }
         $('.counter').text('Nachricht (' + count + ' Zeichen)');
}
$(document).ready(function($) {
     updateCount();
  $('textarea').change(updateCount);
  $('textarea').keyup(updateCount);
});

Zählweise von Null bis zu eingetippter Zeichenanzahl

function updateCount() {
    var count = 0 + $('textarea').val().length;
  if(count < 100){
            $('textarea').addClass("overlimit");
        }
        else {
            $('textarea').removeClass("overlimit");
        }
         $('.counter').text('Nachricht (' + count + ' Zeichen)');
}
$(document).ready(function($) {
     updateCount();
  $('textarea').change(updateCount);
  $('textarea').keyup(updateCount);
});

Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.