Dievalue-Eigenschaft desHTMLInputElement-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" /><pre></pre>

JavaScript

Das<pre>-Element wird in seinerinnerText-Eigenschaft mit dem aktuellen Wert des<input> aktualisiert, jedes Mal, wenn einkeyup-Ereignis ausgelöst wird.

const logElement = document.getElementById("log");const inputElement = document.getElementById("given-name");inputElement.addEventListener("keyup", () => {  logElement.innerText = `Name: ${inputElement.value}`;});

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

Ergebnisse

Abrufen eines Farbwerts

Dieses Beispiel demonstriert dievalue-Eigenschaft mit einem<input> des Typscolor.

HTML

Wir fügen ein<input> des Typscolor hinzu:

<label for="color">Pick a color:</label><input name="color" type="color" /><pre></pre>

JavaScript

Das<pre>-Element wird in seinerinnerText-Eigenschaft mit dem Standardfarbwert (#000000) und danach jedes Mal aktualisiert, wenn einchange-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}`;});

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

Ergebnisse

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <input>
• HTMLInputElement.valueAsDate
• HTMLInputElement.valueAsNumber