<input type="color">

Der value eines <input>-Elements vom Typ color ist immer eine Zeichenkette, die eine siebenstellige Zeichenfolge enthält, die eine RGB-Farbe im Hexadezimalformat angibt. Während Sie die Farbe entweder in Groß- oder Kleinbuchstaben eingeben können, wird sie in Kleinbuchstaben gespeichert. Der Wert liegt niemals in einer anderen Form vor und ist niemals leer.

Eingaben vom Typ color sind einfach aufgrund der begrenzten Anzahl von Attributen, die sie unterstützen.

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

<input type="color" value="#ff0000" />

Wenn Sie keinen Wert angeben, lautet der Standardwert #000000, was schwarz ist. Der Wert muss in siebenstelliger Hexadezimalnotation vorliegen, was bedeutet, dass das Zeichen „#“ gefolgt von jeweils zwei Ziffern, die Rot, Grün und Blau darstellen, wie folgt: #rrggbb. Wenn Sie Farben haben, die in einem anderen Format vorliegen (z. B. CSS-Farbnamen oder CSS-Funktionen wie rgb() oder hsl()), müssen Sie diese vor der Festlegung des value in Hexadezimal umwandeln.

Wie bei anderen <input>-Typen gibt es zwei Ereignisse, die verwendet werden können, um Änderungen des Farbwerts zu erkennen: input und change. input wird jedes Mal beim <input>-Element ausgelöst, wenn sich die Farbe ändert. 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 ermitteln, indem Sie seinen value betrachten.

Hier ist ein Beispiel, das Änderungen im Laufe der Zeit beim Farbwert überwacht:

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

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

Wenn ein Browser keine Farbwähler-Schnittstelle unterstützt, wird als Implementierung von Farbeingaben ein Textfeld verwendet, das den Inhalt automatisch validiert, um sicherzustellen, dass der Wert im richtigen Format vorliegt. In diesem Fall können Sie die Methode select() verwenden, um den derzeit im Bearbeitungsfeld befindlichen Text auszuwählen.

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

colorPicker.select();

Der Wert einer Farbeingabe wird als ungültig betrachtet, wenn der User-Agent nicht in der Lage ist, die Eingabe des Benutzers in eine siebenstellige Hexadezimalnotation in Kleinbuchstaben zu konvertieren. Wenn dies der Fall ist, wird die :invalid Pseudo-Klasse auf das Element angewendet.

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

Das HTML ist ziemlich einfach — ein paar Absätze mit beschreibendem Material und ein <input> vom Typ color mit der ID color-picker, mit dem wir die Textfarbe der Absätze ä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>

Zuerst gibt es ein bisschen Setup. Hier richten wir einige Variablen ein, eine Variable, die die Farbe enthält, die wir beim ersten Laden auf den Farbwähler einstellen, und einen load-Handler, um die Hauptarbeit zu starten, sobald die Seite vollständig geladen ist.

let colorPicker;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

Initialisierung

Sobald die Seite geladen ist, wird unser load-Ereignis-Handler, startup(), aufgerufen:

function startup() {
  colorPicker = document.querySelector("#color-picker");
  colorPicker.value = defaultColor;
  colorPicker.addEventListener("input", updateFirst, false);
  colorPicker.addEventListener("change", updateAll, false);
  colorPicker.select();
}

Dies holt einen Verweis auf das Farb-<input>-Element in einer Variablen namens colorPicker ab und setzt dann den Wert der Farbeingabe auf den Wert in defaultColor. Dann wird das input-Ereignis der Farbeingabe auf unseren updateFirst()-Funktionsaufruf eingestellt, und das change-Ereignis wird auf den Aufruf von updateAll() gesetzt. Diese sind beide unten zu sehen.

Zum Schluss rufen wir select() auf, um den Textinhalt der Farbeingabe auszuwählen, falls die Steuerung als Textfeld implementiert ist (dies hat keinen Effekt, wenn stattdessen eine Farbwähler-Schnittstelle zur Verfügung steht).

Reaktion auf Farbänderungen

Wir stellen zwei Funktionen bereit, die sich mit Farbänderungen befassen. Die updateFirst()-Funktion wird als Reaktion auf das input-Ereignis aufgerufen. Sie ändert die Farbe des ersten Absatzes im Dokument, um sie an den neuen Wert der Farbeingabe anzupassen. Da input-Ereignisse jedes Mal ausgelöst werden, wenn eine Anpassung am Wert vorgenommen wird (z. B. wenn die Helligkeit der Farbe erhöht wird), passieren diese wiederholt, wenn 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 sich der Wert nicht mehr ä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 und verwenden Event.target.value, 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 sein color-Attribut mit dem aktuellen Wert der Farbeingabe übereinstimmt, auf die mit event.target verwiesen wird.

Das endgültige Ergebnis sieht wie folgt aus: