HTMLInputElement.defaultValue — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.defaultValue

Beschreibung

Die Eigenschaft defaultValue spiegelt das HTML-Attribut value eines <input>-Elements wider. Sie enthält also den ursprünglichen Wert, mit dem das Feld ausgeliefert wurde. Der aktuelle Wert, den der Nutzer eintippt oder den ein Skript über input.value setzt, ist davon getrennt.

Gebraucht wird das vor allem an drei Stellen: um zu erkennen, ob ein Formular geändert wurde („ungespeicherte Änderungen“), um einzelne Felder auf ihren Ausgangswert zurückzusetzen und um den Wert festzulegen, den form.reset() wiederherstellt.

Wenn Sie defaultValue setzen, ändert sich das Attribut value im DOM (getAttribute('value') liefert dann den neuen Wert). Solange der Nutzer das Feld noch nicht bearbeitet hat und value noch nicht per Skript gesetzt wurde (das Feld ist dann nicht „dirty“), ändert sich auch der angezeigte Wert mit. Danach nicht mehr.

Bei type="checkbox" und type="radio" ist defaultValue einfach der Wert, der beim Absenden übermittelt wird. Ob das Feld standardmäßig angehakt ist, steht in defaultChecked.

Rückgabewert

Typ

string

Beschreibung

Der Inhalt des Attributs value. Fehlt das Attribut, ist es ein leerer String "". Beim Zuweisen wird jeder Wert in einen String umgewandelt.

Beispiele

Standardwert und aktuellen Wert vergleichen

// HTML: <input id="name" value="Max">
const input = document.querySelector('#name');

input.value = 'Moritz'; // simuliert eine Eingabe

console.log(input.defaultValue);         // ursprünglicher Wert
console.log(input.value);                // aktueller Wert
console.log(input.getAttribute('value')); // Attribut bleibt unverändert

Max Moritz Max

Ungespeicherte Änderungen im Formular erkennen

// HTML: <form id="profil"><input name="email" value="a@b.de"><input name="ort" value="Berlin"></form>
const form = document.querySelector('#profil');

const istGeaendert = () =>
  [...form.querySelectorAll('input')]
    .some((el) => el.value !== el.defaultValue);

window.addEventListener('beforeunload', (event) => {
  if (istGeaendert()) {
    event.preventDefault(); // Browser zeigt Warnhinweis
  }
});

form.elements.ort.value = 'Hamburg';
console.log(istGeaendert());

true

Nach dem Speichern neuen Ausgangswert festlegen

// HTML: <form id="f"><input id="titel" value="Entwurf"></form>
const form = document.querySelector('#f');
const titel = document.querySelector('#titel');

const speichern = async () => {
  // await fetch('/api/speichern', { method: 'POST', body: new FormData(form) });
  titel.defaultValue = titel.value; // gespeicherter Wert wird zum neuen Standard
};

titel.value = 'Finale Fassung';
await speichern();

titel.value = 'Tippfehler';
form.reset(); // stellt den zuletzt gespeicherten Wert wieder her
console.log(titel.value);

Finale Fassung

Einzelnes Feld zurücksetzen

const feld = document.querySelector('input[name="menge"]');
const zuruecksetzen = () => {
  feld.value = feld.defaultValue;
};
document.querySelector('#reset-menge').addEventListener('click', zuruecksetzen);

// Wichtig · Fallstricke

value und defaultValue verwechseln: input.value = … ändert das HTML-Attribut nicht. Wer im DOM-Inspektor oder mit outerHTML nachsieht, findet dort weiter den alten Wert. Soll der neue Wert im Markup landen oder von reset() wiederhergestellt werden, setzen Sie defaultValue.
Anzeige ändert sich nicht immer: Hat der Nutzer das Feld schon bearbeitet oder wurde value per Skript gesetzt, ändert eine Zuweisung an defaultValue nur das Attribut und nicht den sichtbaren Inhalt.
Checkbox und Radio: Hier gibt es keinen Unterschied zwischen value und defaultValue. Den Standardzustand „angehakt“ steuert defaultChecked.
type="file": defaultValue gibt nur das Attribut zurück und hat keinen Einfluss auf die ausgewählten Dateien.
Frameworks: In React und ähnlichen Bibliotheken entspricht die Prop defaultValue diesem Konzept, gilt dort aber nur für ungesteuerte (uncontrolled) Komponenten.
Kompatibilität: Wird seit jeher von allen Browsern unterstützt. HTMLTextAreaElement.defaultValue und HTMLOutputElement.defaultValue funktionieren ähnlich; bei <select> übernimmt das HTMLOptionElement.defaultSelected.

Siehe auch

HTMLInputElement.formTarget HTMLInputElement.defaultChecked HTMLInputElement.multiple HTMLInputElement.value HTMLInputElement.alpha