HTMLTextAreaElement.value — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.value

Beschreibung

Die Eigenschaft value gibt den aktuellen Inhalt eines <textarea>-Elements zurück, also genau das, was der Nutzer gerade im Eingabefeld sieht. Beim Setzen wird der sichtbare Inhalt ersetzt. Enthält das Feld keinen Text, ist der Wert eine leere Zeichenfolge "" – niemals null.

Wichtig ist der Unterschied zu defaultValue bzw. textContent: Der Text zwischen <textarea>…</textarea> im HTML bestimmt nur den Anfangswert. Sobald der Nutzer tippt oder value per Skript gesetzt wird, weichen value und defaultValue voneinander ab. Ein Formular-Reset (form.reset()) stellt wieder defaultValue her.

Zeilenumbrüche werden im Wert als \n (LF) normalisiert, unabhängig vom Betriebssystem. Erst beim Absenden des Formulars werden sie zu \r\n (CRLF) umgewandelt. Das Attribut wrap="hard" fügt beim Absenden zusätzlich Umbrüche an den visuellen Zeilenenden ein, beeinflusst aber nicht den per Skript gelesenen value.

Typische Einsatzgebiete sind Zeichenzähler, Live-Vorschauen (z. B. Markdown), Entwurfsspeicherung in localStorage sowie clientseitige Validierung vor dem Absenden.

Parameter

Name	Typ	Default	Beschreibung
$value (beim Setzen)	string		Neuer Inhalt des Textfelds. Andere Typen werden in eine Zeichenfolge umgewandelt (`null` wird zu `""`).

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Textinhalt des Feldes mit \n als Zeilenumbruch; "", wenn leer.

Beispiele

Wert lesen und setzen

// HTML: <textarea id="nachricht">Hallo</textarea>
const feld = document.querySelector('#nachricht');

console.log(feld.value);        // Anfangswert
feld.value = 'Neuer Text\nZweite Zeile';
console.log(feld.value.split('\n').length);
console.log(feld.defaultValue); // bleibt unverändert

Hallo 2 Hallo

Live-Zeichenzähler mit Obergrenze

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

const aktualisieren = () => {
  const rest = bio.maxLength - bio.value.length;
  zaehler.textContent = `${rest} Zeichen übrig`;
};

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

280 Zeichen übrig

Entwurf automatisch in localStorage sichern

const editor = document.querySelector('#entwurf');
const SCHLUESSEL = 'entwurf-text';

// Gespeicherten Entwurf wiederherstellen
editor.value = localStorage.getItem(SCHLUESSEL) ?? '';

let timer;
editor.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    localStorage.setItem(SCHLUESSEL, editor.value);
  }, 500);
});

editor.form?.addEventListener('submit', () => localStorage.removeItem(SCHLUESSEL));

Validierung vor dem Absenden

const form = document.querySelector('#kontakt');
const text = form.querySelector('textarea[name="text"]');

form.addEventListener('submit', (event) => {
  const inhalt = text.value.trim();
  if (inhalt.length < 10) {
    event.preventDefault();
    text.setCustomValidity('Bitte mindestens 10 Zeichen eingeben.');
    text.reportValidity();
  } else {
    text.setCustomValidity('');
  }
});

// Wichtig · Fallstricke

Nicht textContent/innerHTML verwenden: Diese spiegeln nur den Anfangswert (defaultValue) wider, nicht die aktuelle Eingabe. Wer textContent setzt, ändert defaultValue – und value nur, solange das Feld noch nicht verändert wurde („dirty flag“).
Kein input-Event beim Setzen: Wird value per Skript zugewiesen, feuert kein input- oder change-Event. Bei Bedarf manuell mit el.dispatchEvent(new Event('input', { bubbles: true })) auslösen.
Undo-Verlauf und Cursor: Das Setzen von value leert in vielen Browsern den Rückgängig-Verlauf und setzt die Cursorposition ans Ende. Für Einfügungen an der Cursorposition besser setRangeText() verwenden.
Zeilenumbrüche: value.length zählt \n als ein Zeichen; beim Absenden werden daraus \r\n (zwei Zeichen). Serverseitige Längenprüfungen können dadurch abweichen.
maxlength gilt nur für Nutzereingaben – per Skript kann ein längerer Wert gesetzt werden.
Sicherheit: Der Wert ist unkontrollierte Nutzereingabe. Nie ungeprüft per innerHTML ausgeben (XSS), sondern textContent nutzen oder bereinigen.
Die Eigenschaft wird von allen Browsern seit jeher unterstützt.

Siehe auch

ElementInternals.ariaValueMin HTMLTextAreaElement.name HTMLTextAreaElement.cols HTMLTextAreaElement.type HTMLTextAreaElement.form