HTMLInputElement.valueAsNumber — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.valueAsNumber

Beschreibung

Die Eigenschaft valueAsNumber gibt den Wert eines Eingabefelds direkt als number zurück. Sie erspart das manuelle Umwandeln mit Number() oder parseFloat() und berücksichtigt dabei die typspezifische Interpretation des Werts.

Sie funktioniert nur bei Eingabetypen mit numerischer Bedeutung:

number und range: der eingegebene Zahlenwert.
date, month, week, datetime-local: Millisekunden seit der Unix-Epoche (UTC). Bei month ist es die Anzahl der Monate seit Januar 1970.
time: Millisekunden seit Mitternacht.

Bei allen anderen Typen (z. B. text, email) sowie bei leeren oder ungültigen Eingaben ist der Wert NaN. Die Eigenschaft ist auch beschreibbar: Wird eine Zahl zugewiesen, setzt der Browser value passend formatiert.

Typischer Einsatz: Berechnungen mit Formularwerten (Preisrechner, Schieberegler), Datumsdifferenzen oder das programmatische Setzen von Werten, ohne Zeichenketten formatieren zu müssen.

Rückgabewert

Typ

number

Beschreibung

Der aktuelle Wert als Zahl oder NaN, wenn das Feld leer, ungültig oder vom falschen Typ ist.

Beispiele

Summe aus zwei Zahlenfeldern berechnen

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

const berechnen = () => {
  const summe = menge.valueAsNumber * preis.valueAsNumber;
  console.log(Number.isNaN(summe) ? 'Ungültige Eingabe' : `Gesamt: ${summe.toFixed(2)} €`);
};

menge.addEventListener('input', berechnen);
preis.addEventListener('input', berechnen);
berechnen();

Gesamt: 13.50 €

Tage zwischen zwei Datumsfeldern

// <input type="date" id="von" value="2024-03-01">
// <input type="date" id="bis" value="2024-03-15">
const von = document.querySelector('#von').valueAsNumber;
const bis = document.querySelector('#bis').valueAsNumber;

const tage = (bis - von) / (1000 * 60 * 60 * 24);
console.log(`${tage} Tage`);

14 Tage

Wert programmatisch setzen und Leerfeld erkennen

// <input type="range" id="lautstaerke" min="0" max="100">
// <input type="number" id="alter">
const regler = document.querySelector('#lautstaerke');
regler.valueAsNumber = 75;
console.log(regler.value, typeof regler.value);

const alter = document.querySelector('#alter');
console.log(alter.valueAsNumber); // leeres Feld

// Zeitfeld: Millisekunden seit Mitternacht
const zeit = document.createElement('input');
zeit.type = 'time';
zeit.valueAsNumber = 90 * 60 * 1000;
console.log(zeit.value);

75 string NaN 01:30

// Wichtig · Fallstricke

Immer auf NaN prüfen: Leere oder ungültige Eingaben ergeben NaN, nicht 0. Nutze Number.isNaN() statt === NaN.
Falscher Eingabetyp: Bei type="text" ist der Wert stets NaN; das Setzen einer Zahl wirft dort einen InvalidStateError.
Datumswerte sind UTC: new Date(input.valueAsNumber) interpretiert den Wert als UTC-Mitternacht – in lokalen Zeitzonen kann das zu einem Tag Versatz bei der Anzeige führen. Für Date-Objekte ist valueAsDate (nicht bei datetime-local) eine Alternative.
Begrenzung: Beim Setzen werden min/max/step nicht automatisch geprüft (bei range wird jedoch auf den gültigen Bereich geklemmt). Validierung über checkValidity().
Lokalisierung: Die Eigenschaft ist unabhängig von der angezeigten Schreibweise (Komma/Punkt) – intern gilt immer das Punkt-Format.
Kompatibilität: in allen modernen Browsern verfügbar; Internet Explorer unterstützte nur Teile.

Siehe auch

HTMLInputElement.minLength HTMLInputElement.valueAsDate HTMLInputElement.value HTMLInputElement.alpha HTMLInputElement.capture