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.

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'); 
    } 
});

Beispiel anschauen