<input>-Elemente vom Typcolor bieten ein Benutzerschnittstellenelement, das es einem Benutzer ermöglicht, eine Farbe entweder über eine visuelle Farbauswahl-Schnittstelle anzugeben oder die Farbe in ein Textfeld imCSS-Farbwert-Format einzugeben.

Die Darstellung des Elements kann je nach Browser und/oder Plattform stark variieren – es könnte sich um eine einfache Texteingabe handeln, die automatisch validiert wird, um sicherzustellen, dass die Farbinformation im richtigen Format eingegeben wurde, oder um einen plattformspezifischen Farbwähler oder eine Art benutzerdefiniertes Farbwählerfenster.

Probieren Sie es aus

<p>Choose your colors:</p><div>  <input type="color" name="foreground" value="#e66465" />  <label for="foreground">Foreground color</label></div><div>  <input    type="color"       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

EinCSS-Farbwert.

Zusätzliche Attribute

Zusätzlich zu denglobalen Attributen und den für alle<input>-Elemente gemeinsamenInput-Attributen, unterstützt dascolor Input auch folgende Attribute:

alphaExperimentell

Einboolean-Attribut. Wenn vorhanden, zeigt es an, dass die Alphakomponente der Farbe vom Endbenutzer manipuliert werden kann und nicht vollständig undurchsichtig sein muss.

colorspaceExperimentell

Definiert denFarbraum für die Farbe und gibt Hinweise auf die gewünschte Benutzeroberfläche für das Farbwahl-Widget. Möglicheaufgezählte Werte sind:

• "limited-srgb": Die Farbe befindet sich imsRGB-Farbraum. Dies umfasstrgb(),hsl(),hwb() und<hex-color>-Werte. Der Farbwert ist auf 8 Bit pror,g undb Komponente begrenzt. Dies ist der Standardwert.
• "display-p3": DerDisplay P3-Farbraum, z. B.color(display-p3 1.84 -0.19 0.72 / 0.6)

Verwenden von Farbeingaben

Eingaben vom Typcolor sind einfach aufgrund der begrenzten Anzahl an unterstützten Attributen.

Standardfarbe angeben

Sie können das obige Beispiel aktualisieren, um einen Standardwert festzulegen, sodass der Farbwähler mit der Standardfarbe vorausgefüllt ist und der Farbwähler (sofern vorhanden) ebenfalls auf diese Farbe voreingestellt wird.

<input type="color" value="#ff0000" /><input  type="color"   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 oder vom Browser nicht unterstützt ist, wird der Wert standardmäßig auf#000000 gesetzt, was einem undurchsichtigen Schwarz entspricht.

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 undchange.input wird auf dem<input>-Element jedes Mal ausgelöst, wenn sich die Farbe ändert. Daschange-Ereignis wird ausgelöst, wenn der Benutzer den Farbwähler schließt. In beiden Fällen können Sie den neuen Wert des Elements ermitteln, indem Sie seinenvalue ansehen.

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

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 Farbwähler-Schnittstelle unterstützt, ist seine Implementierung von Farbeingaben ein Textfeld, das den Inhalt automatisch validiert, um sicherzustellen, dass der Wert im richtigen Format vorliegt. In diesem Fall können Sie dieselect()-Methode verwenden, um den aktuell im Bearbeitungsfeld befindlichen Text auszuwählen.

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

colorPicker.select();

Validierung

Ein Farbwert einer Eingabe wird als ungültig betrachtet, wenn derBenutzer-Agent die Benutzereingabe nicht in eine siebenstellige Kleinschrift-Hexadezimal-Notation umwandeln kann. Falls 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 es diechange undinput Ereignisse verfolgt, um die neue Farbe zu nehmen und sie auf jedes<p>-Element im Dokument anzuwenden.

HTML

Das HTML ist ziemlich einfach – ein paar Absätze mit beschreibendem Material mit einem<input> vom Typcolor mit der IDcolor-picker, den wir verwenden werden, um die Farbe des Absatztexts 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" /><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 erfasst eine Referenz zum Farbeingabeelement in einer Variablen namenscolorPicker und setzt den Wert der Farbeingabe auf den Wert indefaultColor. Dann wird dasinput-Ereignis der Farbeingabe so eingerichtet, dass unsere FunktionupdateFirst() aufgerufen wird, und daschange-Ereignis wird so eingerichtet, dassupdateAll() aufgerufen wird. Diese sind beide unten zu sehen.

Schließlich rufen wirselect() auf, um den Textinhalt der Farbeingabe auszuwählen, falls das Steuerelement als Textfeld implementiert ist (dies hat keine Wirkung, wenn stattdessen eine Farbauswahl-Schnittstelle bereitgestellt wird).

Reaktion auf Farbänderungen

Wir stellen zwei Funktionen bereit, die mit Farbänderungen umgehen. DieupdateFirst()-Funktion wird als Reaktion auf dasinput-Ereignis aufgerufen. Sie ändert die Farbe des ersten Absatz-Elements im Dokument so, dass sie mit dem neuen Wert der Farbeingabe übereinstimmt. Dainput-Ereignisse jedes Mal ausgelöst werden, wenn eine Anpassung am Wert vorgenommen wird (zum Beispiel, wenn die Helligkeit der Farbe erhöht wird), geschieht dies wiederholt, 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, was darauf hinweist, dass der Wert nicht mehr geändert wird (es sei denn, der Benutzer öffnet den Farbwähler erneut), wird einchange-Ereignis an das Element gesendet. Wir bearbeiten dieses Ereignis mit der FunktionupdateAll(), wobei wirEvent.target.value verwenden, um die endgültig 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 dascolor-Attribut mit dem aktuellen Wert der Farbeingabe übereinstimmt, auf die mitevent.target verwiesen wird.

Ergebnis

Das endgültige Ergebnis sieht so 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