HTMLInputElement: value-Eigenschaft

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die value-Eigenschaft des HTMLInputElement-Interfaces reprsentiert 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, whrend der Benutzer Daten in die Eingabe eingibt.

HTML

Wir fgen ein <input> und ein zugehriges <label> hinzu, mit einem <pre>-Container fr unsere Ausgabe.

html

<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 ausgelst 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 die value-Eigenschaft mit einem <input> des Typs color.

HTML

Wir fgen ein <input> des Typs color hinzu:

html

<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 ausgelst 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

Spezifikation
HTML # dom-input-value

Browser-Kompatibilitt

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden