<input type="color"> HTML-Attributwert

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.

Zusätzliche Attribute

Zusätzlich zu den globalen Attributen und den Input-Attributen, die allen <input>-Elementen gemeinsam sind, unterstützt das color-Input auch folgende Attribute:

alpha

Ein boolean-Attribut, das, wenn vorhanden, anzeigt, dass die Alphakomponente der Farbe vom Endbenutzer manipuliert werden kann und nicht vollständig opak sein muss.

colorspace

Definiert den Farbraum für die Farbe und gibt Hinweise auf die gewünschte Benutzeroberfläche für das Farbauswahl-Widget. Mögliche enumerierte Werte sind:

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

Verwenden von Farbeingaben

Eingaben des Typs color sind einfach aufgrund der begrenzten Anzahl unterstützter Attribute.

Bereitstellen einer Standardfarbe

Sie können das obige Beispiel aktualisieren, um einen Standardwert festzulegen, damit der Farbwähler mit der Standardfarbe vorbefüllt ist und der Farbwähler (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 der Wert ungültig ist oder von dem Browser nicht unterstützt wird, wird der Wert auf #000000 zurückgesetzt, was opakes Schwarz ist.

Verfolgen von Farbänderungen

Wie bei anderen <input>-Typen gibt es zwei Ereignisse, die verwendet werden können, um Änderungen am Farbwert zu erkennen: input und change. input wird auf dem <input>-Element jedes Mal ausgelöst, wenn die Farbe geändert wird. Das change-Ereignis wird ausgelöst, wenn der Benutzer den Farbwähler schließt. In beiden Fällen können Sie den neuen Wert des Elements bestimmen, indem Sie dessen value betrachten.

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

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

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

Auswählen des Wertes

Wenn ein Browser keine Farbauswahloberfläche unterstützt, wird seine Implementierung von Farbeingaben ein Textfeld sein, das die Inhalte automatisch validiert, um sicherzustellen, dass der Wert im richtigen Format ist. In diesem Fall können Sie die select()-Methode verwenden, um den derzeit im Bearbeitungsfeld befindlichen Text auszuwählen.

Wenn der Browser stattdessen einen Farbwähler verwendet, hat select() keine Wirkung. Sie sollten sich dieses Verhaltens bewusst sein, damit Ihr Code in beiden Fällen angemessen reagieren kann.

colorPicker.select();

Validierung

Ein Farbwerteingabewert wird als ungültig angesehen, wenn der user agent nicht in der Lage ist, die Eingabe des Benutzers in eine siebenstellige, kleingeschriebene Hexadezimalnotation umzuwandeln. Wenn und wann dies der Fall ist, wird die :invalid-Pseudoklasse auf das Element angewendet.

Beispiel

Erstellen wir ein Beispiel, das ein wenig mehr mit der Farbeingabe macht, indem wir die change- und input-Ereignisse verfolgen, um die neue Farbe aufzunehmen und auf jedes <p>-Element im Dokument anzuwenden.

HTML

Das HTML ist ziemlich einfach gehalten — ein paar Absätze mit Beschreibungsmaterial und ein <input> des Typs color mit der ID color-picker, das wir verwenden, um die Farbe des Textes in den Absätzen 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 das Farbeingabeelement:

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

Hierbei wird eine Referenz auf das <input>-Element für die Farbe in einer Variable namens colorPicker gespeichert und anschließend der Wert des Farbeingabefeldes auf den Wert von defaultColor gesetzt. Dann wird das input-Ereignis des Farbeingabefeldes eingerichtet, um unsere updateFirst()-Funktion aufzurufen, und das change-Ereignis wird so eingestellt, dass es updateAll() aufruft. Diese sind unten zu sehen.

Schließlich wird select() aufgerufen, um den Textinhalt der Farbeingabe auszuwählen, wenn die Steuerelemente als Textfeld implementiert sind (dies hat keine Wirkung, wenn stattdessen eine Farbauswahloberfläche bereitgestellt wird).

Reagieren auf Farbänderungen

Wir stellen zwei Funktionen zur Verfügung, die sich mit Farbänderungen befassen. Die updateFirst()-Funktion wird als Reaktion auf das input-Ereignis aufgerufen. Sie ändert die Farbe des ersten Paragrafenelements im Dokument so, dass sie mit dem neuen Wert der Farbeingabe übereinstimmt. Da input-Ereignisse jedes Mal ausgelöst werden, wenn eine Anpassung des Wertes vorgenommen wird (zum Beispiel, wenn die Helligkeit der Farbe erhöht wird), wird dies wiederholt geschehen, während der Farbwähler verwendet wird.

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

Wenn der Farbwähler geschlossen wird und damit angezeigt wird, dass der Wert sich nicht weiter ändern wird (es sei denn, der Benutzer öffnet den Farbwähler erneut), wird ein change-Ereignis an das Element gesendet. Wir behandeln dieses Ereignis mit der updateAll()-Funktion, wobei wir Event.target.value verwenden, um die endgültige, ausgewählte 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 ihr color-Attribut mit dem aktuellen Wert der Farbeingabe übereinstimmt, der durch event.target referenziert wird.

Ergebnis

Das Endergebnis sieht folgendermaßen aus:

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

Siehe auch

• HTMLInputElement.alpha
• HTMLInputElement.colorspace