HTMLTextAreaElement.minLength — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.minLength

Beschreibung

Die Eigenschaft minLength spiegelt das HTML-Attribut minlength eines <textarea>-Elements wider. Sie legt fest, wie viele Zeichen der Nutzer mindestens eingeben muss, damit das Feld bei der Formularvalidierung als gültig gilt. Gezählt werden UTF-16-Codeeinheiten, nicht sichtbare Zeichen. Ein Emoji wie 😀 zählt deshalb als 2.

Ist das Attribut nicht gesetzt, liefert die Eigenschaft -1. Setzt man einen Wert, wird das Attribut minlength im DOM entsprechend aktualisiert. Das ist praktisch, wenn die Anforderungen dynamisch wechseln, zum Beispiel wenn eine Begründung erst ab einer bestimmten Auswahl ausführlicher sein muss.

Unterschreitet der Wert die Mindestlänge, setzt der Browser validity.tooShort auf true, und das Element passt auf die CSS-Pseudoklasse :invalid. Das gilt allerdings nur, wenn der Nutzer den Wert selbst geändert hat. Ein leeres Feld gilt nicht als zu kurz. Wenn eine Eingabe Pflicht sein soll, kombiniert man minLength deshalb mit required.

Parameter

Name	Typ	Default	Beschreibung
$wert	number	-1	Beim Setzen: eine nicht-negative Ganzzahl als neue Mindestlänge. Ein negativer Wert löst eine `DOMException` vom Typ `IndexSizeError` aus.

Rückgabewert

Typ

number

Beschreibung

Die Mindestlänge als Ganzzahl oder -1, wenn kein gültiges minlength-Attribut gesetzt ist.

Beispiele

Mindestlänge lesen und setzen

// HTML: <textarea id="kommentar" minlength="10"></textarea>
const feld = document.querySelector('#kommentar');

console.log(feld.minLength); // 10

feld.minLength = 25;
console.log(feld.getAttribute('minlength')); // "25"

feld.removeAttribute('minlength');
console.log(feld.minLength); // -1

10 "25" -1

Live-Rückmeldung zur Zeichenanzahl

// HTML:
// <textarea id="feedback" minlength="30" required></textarea>
// <p id="hinweis"></p>
const feld = document.querySelector('#feedback');
const hinweis = document.querySelector('#hinweis');

feld.addEventListener('input', () => {
  const fehlend = feld.minLength - feld.value.length;
  if (feld.validity.tooShort) {
    hinweis.textContent = `Noch ${fehlend} Zeichen erforderlich.`;
  } else if (feld.validity.valueMissing) {
    hinweis.textContent = 'Bitte geben Sie Feedback ein.';
  } else {
    hinweis.textContent = '✔ Länge ausreichend';
  }
});

Mindestlänge je nach Auswahl anpassen

// HTML:
// <select id="grund"><option value="lob">Lob</option><option value="beschwerde">Beschwerde</option></select>
// <textarea id="text" required></textarea>
const grund = document.querySelector('#grund');
const text = document.querySelector('#text');

const aktualisieren = () => {
  // Beschwerden brauchen eine ausführlichere Begründung
  text.minLength = grund.value === 'beschwerde' ? 50 : 5;
  text.placeholder = `Mindestens ${text.minLength} Zeichen`;
};

grund.addEventListener('change', aktualisieren);
aktualisieren();

Zählung in UTF-16-Codeeinheiten

const eingabe = '😀😀😀';
console.log(eingabe.length);      // 6 Codeeinheiten
console.log([...eingabe].length); // 3 sichtbare Zeichen
// Mit minlength="5" gilt diese Eingabe also bereits als lang genug.

6 3

// Wichtig · Fallstricke

Nur Nutzereingaben werden geprüft: Wird value per Skript gesetzt, meldet validity.tooShort in der Regel kein Problem. Man sollte sich also nicht darauf verlassen, dass programmatisch gesetzte Werte geprüft werden.
Leere Felder sind gültig: Ohne required darf ein Feld trotz minLength leer bleiben.
Negative Werte: Wenn Sie einen negativen Wert zuweisen, wird eine IndexSizeError-DOMException ausgelöst. Ist minLength größer als maxLength, kann das Feld nie gültig werden.
Zeichenzählung: Emojis und andere Zeichen außerhalb der BMP zählen als 2 Einheiten. Für eine nutzerfreundliche Zeichenanzeige kann man zum Beispiel Intl.Segmenter verwenden. Für die Validierung gilt aber weiterhin die Zählung nach UTF-16.
Sicherheit: Die Prüfung im Browser lässt sich umgehen. Die Länge muss deshalb immer zusätzlich auf dem Server geprüft werden.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Ältere Browser (z. B. Internet Explorer) kennen minlength nicht.

Siehe auch

HTMLTableColElement.vAlign HTMLTextAreaElement.maxLength HTMLTextAreaElement.textLength HTMLTextAreaElement.dirName HTMLTextAreaElement.validity