HTMLInputElement: valueAsNumber-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die valueAsNumber-Eigenschaft des HTMLInputElement-Interfaces repräsentiert den aktuellen Wert des <input>-Elements als Zahl oder NaN, wenn eine Umwandlung in einen numerischen Wert nicht möglich ist.

Diese Eigenschaft kann auch direkt gesetzt werden, um beispielsweise einen Standardwert basierend auf einer Bedingung festzulegen.

In diesem Artikel

Wert

Eine Zahl, die den Wert des Elements darstellt, oder NaN, wenn die numerische Konvertierung unmöglich ist.

Beispiele

Abrufen eines Zahlenwertes

In diesem Beispiel zeigt das Protokoll den aktuellen Wert des number-Eingabefelds, wenn es geändert wird.

HTML

Wir fügen ein <input> des Typs number und ein zugehöriges <label> sowie einen <pre>-Container für unsere Ausgabe ein.

html
<label for="number">Pick a number between 1 and 10:</label>

<input name="number" id="number" min="1" max="10" type="number" />

<pre id="log"></pre>

JavaScript

Das innerText des <pre>-Elements wird bei jedem change-Ereignis auf den aktuellen Wert des <input>-Elements aktualisiert.

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("number");

inputElement.addEventListener("change", () => {
  logElement.innerText = `Number: ${inputElement.valueAsNumber}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Ergebnisse

Wenn Sie die Zahl im Widget löschen, ist das Ergebnis NaN.

Abrufen eines Datumswertes als Zahl

Dieses Beispiel demonstriert die valueAsNumber-Eigenschaft eines <input> mit dem Typ datetime-local.

HTML

Wir fügen ein <input> des Typs datetime-local ein:

html
<label for="date">Pick a date and time:</label>

<input name="date" id="date" type="datetime-local" />

<pre id="log"></pre>

JavaScript

Wenn kein Datum oder keine Uhrzeit ausgewählt ist, ergibt der leere String NaN. Jedes Mal, wenn eine Auswahl getroffen wird, wird ein change-Ereignis ausgelöst, das den Inhalt des <pre>-Elements aktualisiert und den HTMLInputElement.value des Formularelements im Vergleich zu diesem Wert als Zahl anzeigt.

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("date");

logElement.innerText = `Initial value: ${inputElement.valueAsNumber}`;

inputElement.addEventListener("change", () => {
  const d = new Date(inputElement.valueAsNumber);
  logElement.innerText = `${inputElement.value} resolves to ${inputElement.valueAsNumber}, \nwhich is ${d.toDateString()} at ${d.toTimeString()}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLInputElement
Instanzeigenschaften
Instanzmethoden
Events
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

HTMLInputElement: valueAsNumber-Eigenschaft

In diesem Artikel

Wert

Beispiele

Abrufen eines Zahlenwertes

HTML

JavaScript

Ergebnisse

Abrufen eines Datumswertes als Zahl

HTML

JavaScript

Ergebnisse

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN