HTMLInputElement: value-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 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.

In diesem Artikel

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.

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 ausgelöst wird.

js
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 fügen 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 ausgelöst wird.

js
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;
}

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: value-Eigenschaft

In diesem Artikel

Wert

Beispiele

Den Wert eines Texteingabe-Elements abrufen

HTML

JavaScript

Ergebnisse

Abrufen eines Farbwerts

HTML

JavaScript

Ergebnisse

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN