Textarea Maxlength: Maximale Zeichenanzahl in HTML Textarea begrenzen

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.