Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/API/HTMLInputElement/value below:

HTMLInputElement: value-Eigenschaft - Web-APIs | MDN

Baseline Widely available

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.

Eine Zeichenkette, die den Standardwert des <input>-Elements angibt.

In diesem Beispiel wird der aktuelle Wert angezeigt, während der Benutzer Daten in die Eingabe eingibt.

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>

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}`;
});

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

Dieses Beispiel demonstriert die value-Eigenschaft mit einem <input> des Typs color.

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>

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}`;
});

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

Diese Seite wurde automatisch aus dem Englischen übersetzt.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4