77 Stimmen

Textarea Maxlength: Maximale Zeichenanzahl in HTML Textarea begrenzen

Tutorial von Stefan Trost | Letztes Update am 07.05.2021 | Erstellt am 09.03.2013

Leider sieht die HTML Spezifikation nur bei Text-Input-Boxen das Attribut "maxlength" vor, nicht aber bei Textfeldern bzw. Textareas. Wollen wir auch in einer Textarea die maximale Zeichenanzahl begrenzen, die ein Nutzer eingeben kann, müssen wir uns JavaScript bedienen. Wie das geht, zeige ich euch heute.

Ich möchte euch dazu ein Beispiel für jQuery zeigen, das gleichzeitig auch noch die Anzahl der verbleibenden Zeichen anzeigt.

HTML

Den HTML Code möchten wir so gestalten, dass wir das maxlength-Attribut genauso wie von anderen Textfeldern gewohnt, benutzen können:

<div>
   <textarea name="text" maxlength="100"></textarea>
   <p>Verbleibende Zeichen: <span class="charsleft">100</span></p>
</div>

Unter dem Textfeld möchten wir dem Nutzer anzeigen, wie viele Zeichen noch verfügbar sind. Dafür installieren wir uns einen Platzhalter, indem wir den Bereich, in dem später die Zahl erscheinen soll, mit der Klasse "charsleft" kennzeichnen. Diesen können wir dann später einfach ansprechen und die verbleibenden Zeichen ausgeben. Zu Anfang sollte hier natürlich die Zahl der insgesamt zur Verfügung stehenden Zeichen stehen (in unserem Beispiel 100).

In unserem Beispiel haben wir den Platzhalter in eine Zeile mit dem Beginn "Verbleibende Zeichen:" gesetzt. Natürlich stehen uns hier auch beliebige andere Gestaltungsweisen zur Verfügung. Verdeutlicht werden soll am Beispiel nur das Prinzip.

Wichtig für das Beispiel ist jedoch, dass sowohl das Textfeld als auch der Platzhalter im gleichen übergeordneten DIV-Container angeordnet sind. Auf diese Weise erfolgt später die Zuordnung zwischen Textarea und Anzeige. Somit ist es auch möglich, mehrere Textfelder auf einer Seite parallel zu betreiben. Ist dies nicht notwendig könnte man alternativ natürlich unseren Platzhalter auch eine eindeutige ID geben und darüber ansprechen.

jQuery

Kommen wir nun aber zum wichtigsten Teil unseres Tutorials: Das Herzstück ist unser jQuery Code, der dafür sorgt, die Zeichenanzahl zu begrenzen und die Anzeige vorzunehmen.

$(document).ready(function() {
   $('textarea[maxlength]').keyup(function(){
      var max = parseInt($(this).attr('maxlength'));

      if($(this).val().length > max){
         $(this).val($(this).val().substr(0, max));
      }
	 
      $(this).parent().find('.charsleft').html(max - $(this).val().length);
   });	
});

Die Prüfung und Anzeige der verbleibenden Zeichen soll jedes mal ausgeführt werden, wenn der Nutzer die Taste loslässt (keyup).

Zunächst holen wir uns den Wert der maximalen Anzahl von Zeichen aus dem "maxlength"-Attribut und speichern diesen in der Variable "max". Anschließend schauen wir, ob die Länge der Zeichen im Textfeld die maximale Anzahl von Zeichen übersteigt und schneiden gegebenenfalls die überzähligen Zeichen ab.

Zuletzt suchen wir uns den Bereich "charsleft" und setzen diesen auf die Anzahl verbleibender Zeichen (maximale Anzahl von Zeichen - Anzahl der Zeichen im Feld). Wie oben bereits erwähnt funktioniert diese Suche über den Parent-Container des Textfeldes. Möchten wir stattdessen mit einer ID arbeiten könnte man die Zeile auch durch $('#charsleft').html(max - $(this).val().length) ersetzen, der Platzhalterbereich entsprechend <span id="charsleft">.

Warnung

Da wir hier alle Prüfungen auf Clientseite mit JavaScript durchführen, dürfen wir den Daten, die uns nach dem Absenden des Formulars erreichen nicht trauen und sollten zusätzlich in unserem PHP-Code auf die tatsächliche Länge der Nutzereingabe prüfen. Wenn ein Nutzer zum Beispiel JavaScript deaktiviert hat, funktioniert weder die Anzeige der verbleibenden Zeichen noch die Zeichenbegrenzung in der Textarea. Diese Situation unterscheidet sich damit aber auch nicht von herkömmlichen Textfeldern mit maxlength Attribut - auch diese können auf Nutzerseite leicht manipuliert werden und sollten daher auch immer ein weiteres Mal auf Serverebene geprüft werden.

AntwortenPositivNegativDatumStimmen
Avatar
11 Stimme

Ein kleiner Vorschlag von mir:

Alternativ kann man auch die Zeile

$('textarea[maxlength]').keyup(function(){

durch die Zeile

$('textarea[maxlength]').bind('input propertychange',
function(){ 

austauschen.
11.03.2013 um 16:36

AntwortenPositiv Negativ
Avatar
13 Stimmen

In der englischen Version dieses Tutorials hat ein Nutzer angemerkt, dass es Probleme beim Zählen von Zeilenumbrüchen kommen kann: Während ein Zeilenumbruch zum Beispiel auf Windows Systemen aus zwei Zeichen (CR und LF, Carriage Return und Line Feed) besteht, zählt .val().length() einen Zeilenumbruch nur als einzelnes Zeichen.

Abhilfe schafft hier folgenden Code zu ergänzen:

$.valHooks.textarea = { 
   get: function(e) {
      return e.value.replace(/\r?\n/g, "\r\n");
}};

Als Demonstration habe ich dieses jsFiddle angelegt.
24.05.2013 um 00:26

AntwortenPositiv Negativ
Avatar
13 Stimmen

Kleine Anfängerfrage:

Wie muss ich den Codeschnipsel in das Beispiel oben einbauen, damit es funktioniert?

Danke! Echt klasse Arbeit, was du hier leistest!
11.02.2014 um 19:03

Positiv Negativ
Avatar
13 Stimmen

Vielen Dank.

Den Code-Schnipsel kannst du einfach unter "$(document).ready" einfügen:

$(document).ready(function() {
  $('textarea[maxlength]').keyup(function(){
    // ...
  });  

  $.valHooks.textarea = { 
    // ...
  }};
});

$(document).ready wird ausgeführt, wenn die komplette Seite geladen ist. Hier kann man Funktionen definieren, die direkt nach dem Laden ausgeführt werden sollen - zum Beispiel das Belegen von KeyUp-Events.
12.02.2014 um 13:38

Positiv Negativ
Antworten
Antworten

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

HTML-Formular mit Daten vorbelegen

Tutorial | 0 Kommentare

TinyMCE Editor entfernen

Frage | 1 Antwort

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.