HTMLTextAreaElement.defaultValue — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.defaultValue

Beschreibung

Die Eigenschaft defaultValue spiegelt den Textinhalt des <textarea>-Elements wider, also den Text zwischen <textarea> und </textarea>. Sie entspricht damit element.textContent. Anders als bei <input> gibt es kein value-Attribut. Der Standardwert steckt immer im Kindtext.

Zwischen defaultValue und value gibt es einen wichtigen Unterschied: value ist der aktuelle Inhalt, den der Nutzer bearbeitet. defaultValue ist der ursprüngliche Inhalt. Solange das Feld noch nicht verändert wurde („dirty flag“ nicht gesetzt), wirkt sich eine Änderung von defaultValue auch auf value aus. Hat der Nutzer schon getippt oder wurde value per Skript gesetzt, bleibt value unverändert.

Typische Einsatzfälle sind:

Erkennen, ob der Nutzer ungespeicherte Änderungen hat (value !== defaultValue).
Einen neuen Ausgangszustand festlegen, etwa nach dem Speichern, damit form.reset() auf den gespeicherten Stand zurückspringt.
Text vorbelegen, ohne dass innerHTML nötig ist.

Parameter

Name	Typ	Default	Beschreibung
$wert	string		Beim Setzen: der neue Standardtext. Er ersetzt alle Kindknoten des Elements durch einen einzigen Textknoten. Der Wert wird immer als reiner Text behandelt, HTML wird nicht interpretiert.

Rückgabewert

Typ

string

Beschreibung

Der Standardtext des Textbereichs, identisch mit dem textContent des Elements. Ist kein Inhalt vorhanden, ist es ein leerer String.

Beispiele

Unterschied zwischen value und defaultValue

// <textarea id="notiz">Hallo Welt</textarea>
const ta = document.querySelector('#notiz');

console.log(ta.defaultValue); // Ausgangstext
ta.value = 'Geänderter Text';   // simuliert eine Eingabe
console.log(ta.value);
console.log(ta.defaultValue);   // bleibt unverändert

Hallo Welt Geänderter Text Hallo Welt

Ungespeicherte Änderungen erkennen

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

const hatAenderungen = () => ta.value !== ta.defaultValue;

window.addEventListener('beforeunload', (event) => {
  if (hatAenderungen()) {
    event.preventDefault();
    event.returnValue = ''; // löst den Bestätigungsdialog aus
  }
});

Nach dem Speichern neuen Ausgangszustand setzen

const form = document.querySelector('#editor');
const ta = form.querySelector('textarea');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const res = await fetch('/api/notiz', {
    method: 'POST',
    body: new FormData(form)
  });
  if (res.ok) {
    // Gespeicherter Stand wird neuer Reset-Zielwert
    ta.defaultValue = ta.value;
    console.log('Gespeichert, reset() führt jetzt hierher zurück.');
  }
});

Gespeichert, reset() führt jetzt hierher zurück.

defaultValue ist identisch mit textContent

const ta = document.createElement('textarea');
ta.defaultValue = '<b>kein HTML</b>';

console.log(ta.textContent);
console.log(ta.value);      // noch nicht bearbeitet, übernimmt den Standardwert
console.log(ta.innerHTML);  // maskiert

// Wichtig · Fallstricke

Dirty-Flag: Ist value einmal durch den Nutzer oder per Skript geändert worden, wirkt sich das Setzen von defaultValue nicht mehr auf die Anzeige aus. Erst form.reset() übernimmt den neuen Standardwert.
Zeilenumbruch am Anfang: Der HTML-Parser entfernt einen einzelnen Zeilenumbruch direkt nach <textarea>. Er fehlt deshalb auch in defaultValue.
Zeilenenden: value normalisiert Zeilenenden auf \n. Bei defaultValue entspricht der Text dem DOM-Text. Bei Vergleichen können \r\n-Unterschiede deshalb stören.
Sicherheit: Die Eigenschaft ist XSS-sicher, weil der Wert immer als Text und nicht als HTML eingefügt wird. Sie ist daher gegenüber innerHTML vorzuziehen.
Die Eigenschaft wird in allen modernen Browsern seit Langem unterstützt.

Siehe auch

HTMLTextAreaElement.value HTMLTextAreaElement HTMLInputElement.defaultValue HTMLFormElement.reset() Node.textContent HTMLTableRowElement.cells HTMLTextAreaElement.disabled