HTMLInputElement.value — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.value

Beschreibung

Die Eigenschaft value gibt an, was gerade in einem <input>-Element steht. Beim Lesen bekommt man den aktuellen Wert als string, beim Schreiben ändert man ihn per Skript. Man braucht sie ständig: zum Auswerten von Formularen, zum Vorausfüllen von Feldern, zum Zurücksetzen von Eingaben und für die Prüfung direkt während der Eingabe.

Wichtig ist der Unterschied zum HTML-Attribut value. Das Attribut legt nur den Standardwert fest (per Skript erreichbar über defaultValue). Die Eigenschaft value enthält dagegen den aktuellen Wert, der sich durch Benutzereingaben ändert. Schreibt man value, bleibt das Attribut unverändert. getAttribute("value") gibt daher weiterhin den ursprünglichen Wert zurück.

Was genau in value steht, hängt vom type des Feldes ab:

text, search, email, password: der eingegebene Text. Bei email und url entfernt der Browser führende und abschließende Leerzeichen.
number, range: eine Zeichenkette wie "42", keine Zahl. Eine Zahl liefern valueAsNumber oder Number(...).
date, time, month: ein normiertes Format wie "2024-05-17", egal wie das Datum angezeigt wird.
checkbox, radio: der Wert, der beim Absenden übertragen wird (ohne gesetztes Attribut "on"). Ob das Feld angehakt ist, steht in checked, nicht in value.
file: ein Pfad wie "C:\\fakepath\\datei.png". Die eigentlichen Dateien stehen in files.

Ungültige Werte werden bereinigt. Setzt man zum Beispiel bei type="number" den Wert "abc", wird value zu "". Bei type="color" wird ein ungültiger Wert zu "#000000".

Parameter

Name	Typ	Default	Beschreibung
$neuerWert	string		Nur beim Schreiben: der neue Wert. Andere Typen werden in eine Zeichenkette umgewandelt, `null` wird dabei zu `""`. Bei `type="file"` ist nur `""` erlaubt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle, bereinigte Wert des Feldes. Ist das Feld leer, ist es "", nie null.

Beispiele

Eingabe lesen und prüfen

// HTML: <input id="name" type="text"> <button id="ok">OK</button>
const input = document.querySelector('#name');

document.querySelector('#ok').addEventListener('click', () => {
  const name = input.value.trim();
  if (name === '') {
    console.log('Bitte einen Namen eingeben.');
    return;
  }
  console.log(`Hallo, ${name}!`);
});

Hallo, Anna!

Live-Zeichenzähler mit dem input-Event

// HTML: <input id="tweet" maxlength="140"> <span id="zaehler"></span>
const feld = document.querySelector('#tweet');
const zaehler = document.querySelector('#zaehler');

const aktualisieren = () => {
  zaehler.textContent = `${feld.value.length}/140`;
};

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

12/140

Zahlenfeld: Zeichenkette vs. valueAsNumber

// HTML: <input id="menge" type="number" value="3">
const menge = document.querySelector('#menge');

console.log(typeof menge.value);       // Zeichenkette!
console.log(menge.value + 1);          // wird aneinandergehängt
console.log(menge.valueAsNumber + 1);  // echte Rechnung

menge.value = 'abc';                   // ungültig -> wird bereinigt
console.log(JSON.stringify(menge.value));

string 31 4 ""

Wert setzen, Attribut bleibt gleich

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

stadt.value = 'Hamburg';
console.log(stadt.value);                  // aktueller Wert
console.log(stadt.getAttribute('value'));  // Attribut
console.log(stadt.defaultValue);           // Standardwert

// Zurücksetzen auf den Standardwert
stadt.value = stadt.defaultValue;
console.log(stadt.value);

Hamburg Berlin Berlin Berlin

// Wichtig · Fallstricke

Immer eine Zeichenkette: Auch bei type="number" oder range ist value ein string. "3" + 1 ergibt "31". Zum Rechnen valueAsNumber oder Number() verwenden. Bei Datumsfeldern gibt es valueAsDate.
Kein Event beim Setzen per Skript: Wenn ein Skript value setzt, werden weder input noch change ausgelöst. Bei Bedarf selbst auslösen: el.dispatchEvent(new Event('input', { bubbles: true })). Frameworks wie React überwachen den Wert selbst. Dort reicht einfaches Setzen oft nicht, weil der interne Zustand nichts davon erfährt.
Checkbox/Radio: value sagt nichts darüber, ob das Feld angehakt ist. Dafür checked verwenden.
Datei-Felder: Aus Sicherheitsgründen darf man bei type="file" nur "" setzen (zum Leeren). Jeder andere Wert wirft einen InvalidStateError. Der gelesene Pfad beginnt immer mit C:\fakepath\.
Sicherheit (XSS): Benutzereingaben aus value nie ungeprüft mit innerHTML ins Dokument schreiben. Stattdessen textContent verwenden oder den Inhalt vorher unschädlich machen (escapen). Eine Prüfung im Browser ersetzt nie die Prüfung auf dem Server.
Cursorposition: Wird value während der Eingabe neu gesetzt, kann der Cursor ans Ende springen. Gegebenenfalls die Position mit selectionStart/setSelectionRange() sichern und wiederherstellen.
Kompatibilität: Wird von allen Browsern unterstützt. Wie Werte bereinigt werden, ist in der HTML-Spezifikation festgelegt und in modernen Browsern einheitlich.

Siehe auch

HTMLInputElement.alt HTMLInputElement.name HTMLInputElement.alpha HTMLInputElement.capture HTMLInputElement.files