HTMLInputElement: value-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die value-Eigenschaft des HTMLInputElement-Interfaces repräsentiert den aktuellen Wert des <input>-Elements als Zeichenkette.
Diese Eigenschaft kann auch direkt gesetzt werden, zum Beispiel, um einen Standardwert basierend auf einer Bedingung zu setzen.
Wert
Eine Zeichenkette, die den Standardwert des <input>-Elements angibt.
Beispiele
Den Wert eines Texteingabe-Elements abrufen
In diesem Beispiel wird der aktuelle Wert angezeigt, während der Benutzer Daten in die Eingabe eingibt.
HTML
Wir fügen ein <input> und ein zugehöriges <label> hinzu, mit einem <pre>-Container für unsere Ausgabe.
<label for="given-name">Your name:</label> <input name="given-name" id="given-name" /> <pre id="log"></pre> JavaScript
Das <pre>-Element wird in seiner innerText-Eigenschaft mit dem aktuellen Wert des <input> aktualisiert, jedes Mal, wenn ein keyup-Ereignis ausgelöst wird.
const logElement = document.getElementById("log"); const inputElement = document.getElementById("given-name"); inputElement.addEventListener("keyup", () => { logElement.innerText = `Name: ${inputElement.value}`; }); Ergebnisse
Abrufen eines Farbwerts
Dieses Beispiel demonstriert die value-Eigenschaft mit einem <input> des Typs color.
HTML
Wir fügen ein <input> des Typs color hinzu:
<label for="color">Pick a color:</label> <input name="color" id="color" type="color" /> <pre id="log"></pre> JavaScript
Das <pre>-Element wird in seiner innerText-Eigenschaft mit dem Standardfarbwert (#000000) und danach jedes Mal aktualisiert, wenn ein change-Ereignis ausgelöst wird.
const logElement = document.getElementById("log"); const inputElement = document.getElementById("color"); logElement.innerText = `Color: ${inputElement.value}`; inputElement.addEventListener("change", () => { logElement.innerText = `Color: ${inputElement.value}`; }); Ergebnisse
Spezifikationen
| Specification |
|---|
| HTML # dom-input-value |