HTMLTextAreaElement.textLength — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.textLength

Beschreibung

Die schreibgeschützte Eigenschaft textLength gibt als nicht-negative ganze Zahl zurück, wie viele UTF-16-Code-Einheiten der aktuelle Wert (value) eines <textarea>-Elements hat. Sie ist also gleichwertig zu textarea.value.length, erspart aber das Anlegen eines String-Objekts und macht die Absicht im Code deutlicher.

Typischerweise nutzt man textLength für Zeichenzähler („noch 120 Zeichen“), für eigene Längenprüfungen in Kombination mit maxLength/minLength oder um vor dem Absenden festzustellen, ob überhaupt etwas eingegeben wurde.

Wichtig: Gezählt werden Code-Einheiten, nicht sichtbare Zeichen. Emojis und andere Zeichen außerhalb der Basic Multilingual Plane zählen doppelt, kombinierte Zeichen (z. B. Buchstabe + Akzent) oder Emoji-Sequenzen sogar mehrfach. Zeilenumbrüche zählen im DOM-Wert als ein Zeichen (\n), werden beim Absenden des Formulars aber zu \r\n normalisiert.

Rückgabewert

Typ

number

Beschreibung

Nicht-negative ganze Zahl: Anzahl der UTF-16-Code-Einheiten im aktuellen Wert des <textarea>. Schreibzugriffe werden ignoriert (im Strict Mode: TypeError).

Beispiele

Live-Zeichenzähler mit Restanzeige

// HTML: <textarea id="bio" maxlength="200"></textarea> <span id="zaehler"></span>
const bio = document.querySelector('#bio');
const zaehler = document.querySelector('#zaehler');

const aktualisieren = () => {
  const rest = bio.maxLength - bio.textLength;
  zaehler.textContent = `${bio.textLength}/${bio.maxLength} – noch ${rest} Zeichen`;
  zaehler.classList.toggle('warnung', rest < 20);
};

bio.addEventListener('input', aktualisieren);
aktualisieren();

0/200 – noch 200 Zeichen

Mindestlänge vor dem Absenden prüfen

const form = document.querySelector('form');
const nachricht = form.querySelector('textarea[name="nachricht"]');

form.addEventListener('submit', (event) => {
  if (nachricht.textLength < 10) {
    event.preventDefault();
    nachricht.setCustomValidity('Bitte mindestens 10 Zeichen eingeben.');
    nachricht.reportValidity();
  } else {
    nachricht.setCustomValidity('');
  }
});

Code-Einheiten vs. sichtbare Zeichen

const ta = document.createElement('textarea');
ta.value = 'Hallo 👋';

console.log(ta.textLength);          // UTF-16-Code-Einheiten
console.log(ta.value.length);        // identisch
console.log([...ta.value].length);   // Code-Points

// Graphem-Cluster (für Benutzer sichtbare Zeichen)
const seg = new Intl.Segmenter('de', { granularity: 'grapheme' });
console.log([...seg.segment(ta.value)].length);

8 8 7 7

// Wichtig · Fallstricke

Code-Einheiten statt Zeichen: Emojis wie „👋“ zählen 2, Familien-Emojis oder Flaggen noch mehr. Für eine benutzerfreundliche Anzeige Intl.Segmenter verwenden. Beachte, dass maxlength ebenfalls in Code-Einheiten misst – Zähler und Grenze passen also zueinander.
Zeilenumbrüche: Im DOM zählt ein Umbruch als 1; beim Formularversand wird daraus \r\n (2 Zeichen). Serverseitige Längenprüfungen können daher strenger ausfallen.
Schreibgeschützt: Eine Zuweisung hat keine Wirkung; die Länge ändert man nur über value.
Es gibt kein textLength auf HTMLInputElement – dort input.value.length nutzen. Nicht verwechseln mit SVGTextContentElement.textLength.
Kompatibilität: in allen aktuellen Browsern (Chrome, Firefox, Safari, Edge) seit Langem unterstützt.

Siehe auch

String.prototype.length Intl.Segmenter HTMLTableRowElement.vAlign HTMLTextAreaElement.maxLength HTMLTextAreaElement.minLength