HTMLInputElement.maxLength — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.maxLength

Beschreibung

Die Eigenschaft maxLength spiegelt das HTML-Attribut maxlength eines <input>-Elements. Sie legt fest, wie viele Zeichen der Benutzer höchstens eingeben darf. Gezählt werden UTF-16-Codeeinheiten, nicht sichtbare Zeichen. Ist das Attribut nicht gesetzt oder ungültig, liefert die Eigenschaft -1.

Wirksam ist maxLength nur bei den Typen text, search, url, tel, email und password. Bei anderen Typen wie number oder date kann man den Wert zwar setzen, er wird aber ignoriert. Browser verhindern in der Regel, dass der Benutzer mehr Zeichen eintippt oder einfügt. Längere Eingaben werden also abgeschnitten.

Typische Einsatzfälle sind Zeichenzähler („noch 42 Zeichen“), dynamische Grenzen je nach Formularzustand (z. B. je nach Land ein anderes Postleitzahlformat) und das Abgleichen mit Datenbank-Spaltenlängen. Die Grenze ist auch Teil der Constraint Validation API: validity.tooLong wird gesetzt, wenn ein durch den Benutzer bearbeiteter Wert zu lang ist.

Parameter

Name	Typ	Default	Beschreibung
$value	number	-1	Beim Setzen: nicht-negative Ganzzahl mit der maximalen Anzahl an UTF-16-Codeeinheiten. Ein negativer Wert löst eine `IndexSizeError`-`DOMException` aus.

Rückgabewert

Typ

number

Beschreibung

Die maximale Zeichenanzahl als Ganzzahl oder -1, wenn kein gültiges maxlength-Attribut gesetzt ist.

Beispiele

Grenze auslesen und dynamisch setzen

const input = document.createElement('input');
input.type = 'text';
console.log(input.maxLength); // noch kein Attribut

input.maxLength = 10;
console.log(input.maxLength);
console.log(input.getAttribute('maxlength'));

-1 10 "10"

Live-Zeichenzähler für ein Eingabefeld

// HTML: <input id="titel" maxlength="60"> <small id="rest"></small>
const feld = document.querySelector('#titel');
const rest = document.querySelector('#rest');

const aktualisieren = () => {
  const uebrig = feld.maxLength - feld.value.length;
  rest.textContent = `Noch ${uebrig} Zeichen`;
};

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

Noch 60 Zeichen

Postleitzahl-Länge je nach Land anpassen

const land = document.querySelector('#land');
const plz = document.querySelector('#plz');
const plzLaengen = { DE: 5, AT: 4, CH: 4, NL: 7 };

land.addEventListener('change', () => {
  plz.maxLength = plzLaengen[land.value] ?? 10;
  // Bereits vorhandenen, zu langen Wert kürzen
  if (plz.value.length > plz.maxLength) {
    plz.value = plz.value.slice(0, plz.maxLength);
  }
});

Fallstrick: Emojis zählen doppelt

const input = document.createElement('input');
input.maxLength = 4;
input.value = '😀😀';

console.log(input.value.length); // UTF-16-Codeeinheiten
console.log([...input.value].length); // Codepoints

try {
  input.maxLength = -5;
} catch (e) {
  console.log(e.name);
}

4 2 IndexSizeError

// Wichtig · Fallstricke

Zählung in UTF-16-Codeeinheiten: Emojis und viele seltene Schriftzeichen belegen zwei Einheiten, zusammengesetzte Emojis (z. B. Familien- oder Flaggen-Emojis) auch deutlich mehr. Eine für Menschen passende Zeichenzählung liefert Intl.Segmenter.
Nur Benutzereingaben werden begrenzt: Wird input.value per Skript gesetzt, wird der Wert nicht gekürzt, und validity.tooLong bleibt false. tooLong wird nur gesetzt, wenn der Benutzer den Wert bearbeitet hat.
Negative Werte: Das Setzen eines negativen Werts löst eine IndexSizeError-DOMException aus. Das Attribut per removeAttribute('maxlength') zu entfernen, stellt -1 wieder her.
Keine Sicherheitsgrenze: Die Beschränkung gilt nur im Client und lässt sich über die Entwicklerwerkzeuge leicht umgehen. Die Länge muss deshalb immer auch auf dem Server geprüft werden.
Bei type="number" hat maxLength keine Wirkung. Dort begrenzt man den Wert mit max/min.
Die Eigenschaft wird von allen modernen Browsern seit Langem unterstützt. Bei <textarea> gibt es das Gegenstück HTMLTextAreaElement.maxLength.

Siehe auch

HTMLInputElement.formEnctype HTMLInputElement.minLength HTMLInputElement.accept HTMLInputElement.alt HTMLInputElement.max