HTMLTextAreaElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLTextAreaElement extends HTMLElement

Beschreibung

HTMLTextAreaElement ist die DOM-Schnittstelle hinter jedem <textarea>-Element. Sie erbt von HTMLElement und ergänzt Eigenschaften und Methoden für mehrzeilige Texteingaben. Damit kann man den Inhalt lesen und schreiben, die Textauswahl und die Cursorposition steuern und die eingebaute Formularvalidierung nutzen.

Wichtige Eigenschaften sind:

value: der aktuelle Text. Der Standardwert steht dagegen in defaultValue bzw. im Textinhalt des Elements.
rows, cols und wrap: sichtbare Größe und Umbruchverhalten.
maxLength, minLength, required, placeholder, readOnly, disabled.
selectionStart, selectionEnd und selectionDirection: Auswahl und Cursor.
textLength, form, labels, validity, validationMessage, willValidate.

Wichtige Methoden sind select(), setSelectionRange(start, end, direction) und setRangeText(text, start, end, selectMode) zum gezielten Einfügen oder Ersetzen von Text. Dazu kommen checkValidity(), reportValidity() und setCustomValidity(message) für die Validierung.

Typische Einsatzfälle sind Kommentarfelder mit Zeichenzähler, einfache Markdown-Editoren mit Formatierungsknöpfen, Felder, die mit dem Inhalt mitwachsen, und eigene Validierungsregeln. Um auf Eingaben zu reagieren, nutzt man das input-Event. Das change-Event feuert erst, wenn das Feld den Fokus verliert.

Rückgabewert

Typ

HTMLTextAreaElement

Beschreibung

Instanzen bekommt man über document.querySelector('textarea'), document.getElementById() oder document.createElement('textarea').

Beispiele

Textarea erzeugen und konfigurieren

const textarea = document.createElement('textarea');
textarea.name = 'kommentar';
textarea.rows = 5;
textarea.cols = 40;
textarea.placeholder = 'Ihr Kommentar …';
textarea.maxLength = 500;
textarea.required = true;
document.querySelector('form').append(textarea);

console.log(textarea instanceof HTMLTextAreaElement);
console.log(textarea.type);

true textarea

Zeichenzähler mit dem input-Event

const textarea = document.querySelector('#kommentar');
const counter = document.querySelector('#zaehler');

const update = () => {
  const rest = textarea.maxLength - textarea.value.length;
  counter.textContent = `${rest} Zeichen übrig`;
};

textarea.addEventListener('input', update);
update();

500 Zeichen übrig

Markierten Text fett formatieren (Markdown)

const editor = document.querySelector('#editor');

const wrapSelection = (before, after = before) => {
  const { selectionStart: start, selectionEnd: end, value } = editor;
  const selected = value.slice(start, end);
  editor.setRangeText(`${before}${selected}${after}`, start, end, 'select');
  editor.focus();
  // Das input-Event manuell auslösen, damit andere Listener reagieren
  editor.dispatchEvent(new Event('input', { bubbles: true }));
};

document.querySelector('#btn-bold')
  .addEventListener('click', () => wrapSelection('**'));

Automatisch mitwachsende Höhe und eigene Validierung

const ta = document.querySelector('#nachricht');

ta.addEventListener('input', () => {
  // Höhe an den Inhalt anpassen
  ta.style.height = 'auto';
  ta.style.height = `${ta.scrollHeight}px`;

  // Eigene Regel: mindestens drei Wörter
  const words = ta.value.trim().split(/\s+/).filter(Boolean).length;
  ta.setCustomValidity(words < 3 ? 'Bitte mindestens drei Wörter eingeben.' : '');
});

ta.form.addEventListener('submit', (e) => {
  if (!ta.reportValidity()) e.preventDefault();
});

// Wichtig · Fallstricke

Unterschied zwischen value und textContent: Nachdem jemand getippt hat, steht der aktuelle Inhalt nur in value. textContent und innerHTML ändern nur den Standardwert (defaultValue). Ob das Feld sichtbar neu befüllt wird, hängt davon ab, ob value schon bearbeitet wurde (der „dirty“-Zustand).
Undo-Verlauf: Wird value direkt gesetzt, löschen die meisten Browser den Rückgängig-Verlauf. Auch setRangeText() erhält ihn nicht. Das veraltete document.execCommand('insertText') erhält ihn zwar oft, ist aber als obsolet markiert.
Kein automatisches input-Event: Wenn ein Skript value oder setRangeText() nutzt, wird kein input-Event ausgelöst. Bei Bedarf muss man es selbst mit dispatchEvent auslösen.
Zeilenumbrüche: value liefert Zeilenumbrüche als \n. Beim Absenden des Formulars werden sie als \r\n übertragen, und bei wrap="hard" kommen zusätzliche Umbrüche hinzu. maxLength zählt in UTF-16-Codeeinheiten. Emojis können deshalb zwei Zeichen belegen.
Sicherheit: Benutzereingaben aus value nie ungefiltert per innerHTML ausgeben, sonst droht XSS. Stattdessen textContent verwenden oder die Eingabe bereinigen. Prüfungen im Browser (maxLength, required) ersetzen keine Prüfung auf dem Server.
Kompatibilität: Das Interface wird von allen modernen Browsern unterstützt. setRangeText() fehlt im Internet Explorer. Für die automatische Höhenanpassung gibt es inzwischen die CSS-Eigenschaft field-sizing: content, die aber noch nicht überall verfügbar ist.

Siehe auch

HTMLAreaElement HTMLDetailsElement HTMLMetaElement HTMLMeterElement HTMLPictureElement