HTMLTextAreaElement.maxLength — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.maxLength

Beschreibung

Die Eigenschaft maxLength des Interfaces HTMLTextAreaElement spiegelt das HTML-Attribut maxlength. Sie legt fest, wie viele Zeichen Nutzerinnen und Nutzer höchstens in das Textfeld eingeben dürfen. Der Browser verhindert weitere Eingaben, sobald die Grenze erreicht ist. Das gilt auch für Einfügen per Zwischenablage: Überlange Inhalte werden abgeschnitten.

Gezählt werden UTF-16-Codeeinheiten, keine sichtbaren Zeichen. Genau das liefert auch value.length. Ein Emoji wie 😀 zählt deshalb als 2, zusammengesetzte Emojis (z. B. Familien- oder Flaggen-Emojis) zählen oft noch mehr.

Ist das Attribut nicht gesetzt oder ungültig, liefert die Eigenschaft -1. Wenn Sie der Eigenschaft einen Wert zuweisen, wird das Attribut maxlength im DOM gesetzt. Typische Einsatzfälle sind Kommentar- und Nachrichtenfelder mit Zeichenzähler oder Grenzen, die sich zur Laufzeit ändern, etwa je nach gewähltem Kanal (SMS, Tweet, Betreffzeile).

Die Eigenschaft wirkt mit der Formularvalidierung zusammen. Ist der Wert zu lang, meldet validity.tooLong den Wert true. Das passiert aber nur, wenn die Nutzerin oder der Nutzer den Wert selbst bearbeitet hat.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	number	-1 (keine Begrenzung)	Nicht-negative Ganzzahl, die als neue Höchstlänge in das Attribut `maxlength` geschrieben wird. Negative Werte lösen einen `IndexSizeError` aus.

Rückgabewert

Typ

number

Beschreibung

Die maximale Zeichenzahl in UTF-16-Codeeinheiten oder -1, wenn kein gültiges maxlength-Attribut gesetzt ist.

Beispiele

Wert auslesen und Standardwert erkennen

// HTML: <textarea id="kommentar" maxlength="280"></textarea>
//       <textarea id="notiz"></textarea>
const kommentar = document.getElementById('kommentar');
const notiz = document.getElementById('notiz');

console.log(kommentar.maxLength);
console.log(notiz.maxLength); // kein Attribut gesetzt

280 -1

Live-Zeichenzähler für ein Kommentarfeld

// HTML: <textarea id="text" maxlength="200"></textarea>
//       <span id="zaehler"></span>
const feld = document.getElementById('text');
const zaehler = document.getElementById('zaehler');

const aktualisieren = () => {
  const rest = feld.maxLength - feld.value.length;
  zaehler.textContent = `${rest} Zeichen übrig`;
  zaehler.classList.toggle('warnung', rest < 20);
};

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

200 Zeichen übrig

Grenze dynamisch je nach Kanal ändern

// HTML: <select id="kanal"><option value="sms">SMS</option><option value="mail">E-Mail</option></select>
//       <textarea id="nachricht"></textarea>
const limits = { sms: 160, mail: 5000 };
const kanal = document.getElementById('kanal');
const nachricht = document.getElementById('nachricht');

const setzeLimit = () => {
  nachricht.maxLength = limits[kanal.value];
  // Bereits vorhandenen, zu langen Text kürzen
  if (nachricht.value.length > nachricht.maxLength) {
    nachricht.value = nachricht.value.slice(0, nachricht.maxLength);
  }
  console.log(nachricht.getAttribute('maxlength'));
};

kanal.addEventListener('change', setzeLimit);
setzeLimit();

160

Negative Werte abfangen

const ta = document.createElement('textarea');
try {
  ta.maxLength = -5;
} catch (err) {
  console.log(err.name);
}
ta.maxLength = 50;
console.log(ta.outerHTML);

IndexSizeError <textarea maxlength="50"></textarea>

// Wichtig · Fallstricke

Nur für Nutzereingaben: Wenn Sie value per Skript setzen, wird der Text nicht gekürzt. Auch validity.tooLong bleibt bei rein programmatisch gesetzten Werten meist false. Kürzen Sie bei Bedarf selbst.
UTF-16-Zählung: Emojis und andere Zeichen außerhalb der Basic Multilingual Plane zählen doppelt oder mehrfach. Ein Zähler auf Basis von value.length passt zur Browser-Grenze. [...value].length oder Intl.Segmenter liefern dagegen andere Werte.
Zeilenumbrüche: Beim Absenden werden Zeilenumbrüche als \r\n übertragen. Auf dem Server kann der Text daher länger sein als die im Browser gezählte Länge.
Keine Sicherheitsgrenze: maxLength lässt sich über die Entwicklertools leicht umgehen. Prüfen Sie Längen immer auch auf dem Server.
Negative Werte lösen eine DOMException vom Typ IndexSizeError aus. Nicht-ganzzahlige Werte werden in eine Ganzzahl umgewandelt.
Die Eigenschaft wird von allen modernen Browsern seit Langem unterstützt.

Siehe auch

HTMLTableCellElement.vAlign HTMLTextAreaElement.minLength HTMLTextAreaElement.textLength HTMLTextAreaElement.validity HTMLTextAreaElement.labels