Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

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

Beispiel anschauen

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 2 Kommentare

  1. René
    schrieb am 12.02.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

    Antworten
  2. Michael
    schrieb am 06.06.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

    Antworten

Schreibe einen Kommentar zu René Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →