Signatur
Beschreibung
Die Eigenschaft defaultValue des Interfaces HTMLOutputElement ist ein String. Sie enthält den Standardwert eines <output>-Elements, also den Text, den das Element nach einem form.reset() oder nach einem Klick auf einen <button type="reset"> wieder anzeigt.
Anders als bei <input> gibt es bei <output> kein value-Attribut im HTML. Den Standardwert bildet zunächst einfach der Textinhalt des Elements. Solange niemand value gesetzt hat, sind defaultValue und textContent identisch. Wenn Sie in diesem Zustand defaultValue setzen, ändert sich deshalb auch der angezeigte Text.
Sobald Sie zum ersten Mal value setzen, speichert der Browser den bisherigen Text intern als Standardwert (in der Spezifikation heißt das default value override). Ab dann laufen die beiden Eigenschaften getrennt: value steuert, was angezeigt wird, und defaultValue legt nur noch fest, worauf beim Zurücksetzen zurückgesprungen wird. Beim Zurücksetzen wird der Text auf den Standardwert gesetzt, und der interne Zustand wird gelöscht.
Typische Anwendungsfälle sind Rechner- und Konfigurationsformulare, bei denen ein Ergebnisfeld nach dem Zurücksetzen einen sinnvollen Ausgangswert zeigen soll, etwa "0 €" oder "–".
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | string | Nur beim Setzen: der neue Standardwert. Andere Typen werden in einen String umgewandelt (zum Beispiel wird 42 zu "42"). |
Rückgabewert
value noch nie gesetzt, ist das der Textinhalt des Elements (textContent). Andernfalls ist es der intern gespeicherte Standardwert.Beispiele
Unterschied zwischen value und defaultValue
// HTML: <form id="calc"><output id="ergebnis">0</output></form>
const out = document.querySelector('#ergebnis');
console.log(out.defaultValue); // Textinhalt
out.value = '42'; // Anzeige ändern
console.log(out.value, out.defaultValue);
document.querySelector('#calc').reset();
console.log(out.value); // zurück auf den StandardwertRechner mit Reset-Knopf und eigenem Standardwert
// HTML:
// <form id="rechner">
// <input type="number" name="a" value="0"> +
// <input type="number" name="b" value="0"> =
// <output name="summe" for="a b"></output>
// <button type="reset">Zurücksetzen</button>
// </form>
const form = document.querySelector('#rechner');
const summe = form.elements.summe;
// Solange value noch nicht gesetzt wurde, ändert das auch die Anzeige
summe.defaultValue = '–';
console.log(summe.textContent);
form.addEventListener('input', () => {
const a = form.elements.a.valueAsNumber || 0;
const b = form.elements.b.valueAsNumber || 0;
summe.value = String(a + b);
});
// Nach einem Klick auf „Zurücksetzen“ steht wieder „–“ im FelddefaultValue ändern, nachdem value gesetzt wurde
// HTML: <form><output id="status">bereit</output></form>
const status = document.querySelector('#status');
status.value = 'lädt …'; // ab hier laufen die Werte getrennt
status.defaultValue = 'leer'; // ändert die Anzeige NICHT
console.log(status.textContent, '|', status.defaultValue);
status.form.reset();
console.log(status.textContent);// Wichtig · Fallstricke
- Das Setzen verhält sich je nach Zustand unterschiedlich: Vor dem ersten Setzen von
valueüberschreibtdefaultValue = …den sichtbaren Textinhalt. Danach ändert es nur den Wert, der beim Zurücksetzen verwendet wird. Das führt leicht zu Verwirrung. - Es gibt kein HTML-Attribut
valueoderdefaultvaluefür<output>. Den Ausgangswert legt man im Markup über den Textinhalt fest. - Kindelemente (etwa
<span>) gehen verloren: Beim Zurücksetzen, und wenn mandefaultValuevor dem ersten Setzen vonvalueändert, wird der gesamte Inhalt durch reinen Text ersetzt. Der Wert wird nie als HTML ausgewertet, ist also sicher vor XSS. - Ein Zurücksetzen wirkt nur, wenn das Element zu einem Formular gehört, entweder als Kind eines
<form>oder über das Attributform. - Kompatibilität: Chrome, Edge, Firefox und Safari unterstützen die Eigenschaft seit Langem. Internet Explorer unterstützt
<output>nicht.