<input type="color"> HTML-Attributswert

Probieren Sie es aus

<p>Choose your colors:</p>

<div>
  <input type="color" id="foreground" name="foreground" value="#e66465" />
  <label for="foreground">Foreground color</label>
</div>

<div>
  <input
    type="color"
    id="background"
    name="background"
    value="oklab(50% 0.1 0.1 / 0.5)"
    colorspace="display-p3"
    alpha />
  <label for="background">Background color</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Wert

Ein CSS-Farbwert.

Zustzliche Attribute

Zustzlich zu den globalen Attributen und den Input-Attributen, die allen <input>-Elementen gemeinsam sind, untersttzt der color-Input auch die folgenden Attribute:

alpha

Ein boolesches Attribut, das anzeigt, dass der Alphakanal der Farbe vom Endbenutzer bearbeitet werden kann und nicht vollstndig undurchsichtig sein muss.

colorspace

Definiert den Farbraum fr die Farbe und gibt einen Hinweis auf die gewnschte Benutzeroberflche fr das Farbwahl-Widget. Mgliche aufgezhlte Werte sind:

• "limited-srgb": Die Farbe befindet sich im sRGB-Farbraum. Dies schliet rgb(), hsl(), hwb() und <hex-color> Werte ein. Der Farbwert ist auf 8-Bit pro r, g und b Komponente beschrnkt. Dies ist der Standard.
• "display-p3": Der Display P3-Farbraum, z.B. color(display-p3 1.84 -0.19 0.72 / 0.6).

Verwendung von Farbeingaben

Eingaben des Typs color sind einfach, aufgrund der begrenzten Anzahl von Attributen, die sie untersttzen.

Eine Standardfarbe bereitstellen

Sie knnen das obige Beispiel aktualisieren, um einen Standardwert festzulegen, sodass der Farbwhler mit der Standardfarbe vorausgefllt ist und der Farbwhler (falls vorhanden) auch auf diese Farbe voreingestellt ist.

<input type="color" value="#ff0000" />
<input
  type="color"
  id="body"
  name="body"
  value="oklab(50% 0.1 0.1 / 0.5)"
  colorspace="display-p3"
  alpha />

Wenn Sie keinen Wert angeben oder wenn der Wert ungltig oder anderweitig vom Browser nicht untersttzt wird, wird der Wert standardmig auf #000000 gesetzt, was undurchsichtiges Schwarz ist.

Farbnderungen verfolgen

Wie bei anderen <input>-Typen gibt es zwei Ereignisse, die verwendet werden knnen, um nderungen des Farbwerts zu erkennen: input und change. input wird auf dem <input>-Element jedes Mal ausgelst, wenn sich die Farbe ndert. Das change-Ereignis wird ausgelst, wenn der Benutzer den Farbwhler schliet. In beiden Fllen knnen Sie den neuen Wert des Elements bestimmen, indem Sie sich seinen value ansehen.

Hier ist ein Beispiel, das nderungen des Farbwerts im Laufe der Zeit berwacht:

colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", watchColorPicker);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Den Wert auswhlen

Wenn ein Browser keine Farbauswahloberflche untersttzt, wird die Implementierung der Farbeingaben ein Textfeld sein, das die Inhalte automatisch validiert, um sicherzustellen, dass der Wert im richtigen Format ist. In diesem Fall knnen Sie die Methode select() verwenden, um den aktuell im Bearbeitungsfeld enthaltenen Text auszuwhlen.

Wenn der Browser stattdessen einen Farbwhler verwendet, tut select() nichts. Sie sollten sich dieses Verhaltens bewusst sein, damit Ihr Code in beiden Fllen entsprechend reagieren kann.

colorPicker.select();

Validierung

Ein Wert einer Farbeingabe wird als ungltig angesehen, wenn der Benutzeragent nicht in der Lage ist, die Eingabe des Benutzers in eine siebenstellige Kleinbuchstaben-Hexadezimalschreibweise umzuwandeln. Wenn dies der Fall ist, wird die :invalid-Pseudoklasse auf das Element angewendet.

Beispiel

Erstellen wir ein Beispiel, das etwas mehr mit der Farbeingabe macht, indem die change- und input-Ereignisse verfolgt werden, um die neue Farbe zu bernehmen und auf jedes <p>-Element im Dokument anzuwenden.

HTML

Das HTML ist ziemlich einfach ein paar Absatztext mit einer <input> vom Typ color mit der ID color-picker, die wir verwenden werden, um die Farbe des Textes der Abstze zu ndern.

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="color-picker">Color:</label>
<input type="color" value="#ff0000" id="color-picker" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

JavaScript

Initialisierung

Der folgende Code initialisiert die Farbeingabe:

const defaultColor = "#0000ff";
const colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", updateAll);
colorPicker.select();

Dies erhlt einen Verweis auf das Farbeingabe-Element im Dokument in einer Variablen namens colorPicker und setzt den Wert der Farbeingabe auf den Wert in defaultColor. Dann wird das input-Ereignis der Farbeingabe eingerichtet, um unsere updateFirst()-Funktion aufzurufen, und das change-Ereignis wird so festgelegt, dass es updateAll() aufruft. Diese sind beide unten zu sehen.

Schlielich rufen wir select() auf, um den Textinhalt der Farbeingabe auszuwhlen, wenn die Steuerung als Textfeld implementiert ist (dies hat keinen Effekt, wenn stattdessen eine Farbauswahloberflche bereitgestellt wird).

Auf Farbnderungen reagieren

Wir bieten zwei Funktionen an, die mit Farbnderungen umgehen. Die updateFirst()-Funktion wird als Reaktion auf das input-Ereignis aufgerufen. Sie ndert die Farbe des ersten Absatz-Elements im Dokument, um mit dem neuen Wert der Farbeingabe bereinzustimmen. Da input-Ereignisse jedes Mal ausgelst werden, wenn eine Anpassung am Wert vorgenommen wird (zum Beispiel, wenn die Helligkeit der Farbe erhht wird), geschieht dies wiederholt, whrend der Farbwhler verwendet wird.

function updateFirst(event) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

Wenn der Farbwhler geschlossen wird, was bedeutet, dass sich der Wert nicht mehr ndern wird (es sei denn, der Benutzer ffnet den Farbwhler erneut), wird ein change-Ereignis an das Element gesendet. Wir behandeln dieses Ereignis mit der updateAll()-Funktion, indem wir Event.target.value verwenden, um die endgltig ausgewhlte Farbe zu erhalten:

function updateAll(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Dies setzt die Farbe jedes <p>-Blocks so, dass dessen color-Attribut mit dem aktuellen Wert der Farbeingabe bereinstimmt, auf die durch event.target verwiesen wird.

Ergebnis

Das endgltige Ergebnis sieht so aus:

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilitt

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

Siehe auch

• HTMLInputElement.alpha
• HTMLInputElement.colorspace