<input type="color">

Der value eines <input>-Elements vom Typ color ist immer ein Zeichenfolge, die eine 7-stellige Zeichenfolge enthält, die eine RGB-Farbe im Hexadezimalformat angibt. Während Sie die Farbe sowohl in Groß- als auch in Kleinbuchstaben eingeben können, wird sie in Kleinbuchstaben gespeichert. Der Wert liegt nie 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 vorausgewählt wird und der Farbwähler (falls vorhanden) ebenfalls auf diese Farbe voreingestellt ist:

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

Wenn Sie keinen Wert angeben, ist der Standard #000000, was schwarz ist. Der Wert muss in der siebenstelligen hexadezimalen Notation angegeben werden, d.h. das "#" Zeichen, gefolgt von je zwei Ziffern für Rot, Grün und Blau, wie folgt: #rrggbb. Wenn Sie Farben in einem anderen Format haben (wie CSS-Farbnamen oder CSS-Farbfunktionen wie rgb() oder hsl()), müssen Sie sie in Hexadezimal umwandeln, bevor Sie den value setzen.

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 auf dem <input>-Element jedes Mal 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 durch Überprüfung seines value ermitteln.

Hier ist ein Beispiel, das Änderungen des Farbwerts im Laufe der Zeit ü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ählerschnittstelle unterstützt, besteht seine Implementierung von Farbeingaben aus einem Textfeld, das den Inhalt automatisch überprüft, um sicherzustellen, dass der Wert im richtigen Format vorliegt. 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, bewirkt select() nichts. Sie sollten sich dieses Verhaltens bewusst sein, damit Ihr Code in beiden Fällen entsprechend reagieren kann.

colorPicker.select();

Der Wert einer Farbeingabe gilt als ungültig, wenn der User-Agent die Eingabe des Benutzers nicht in eine siebenstellige, kleingeschriebene hexadezimale Notation umwandeln kann. Sollte dies der Fall sein, wird die :invalid-Pseudoklasse auf das Element angewendet.

Lassen Sie uns ein Beispiel erstellen, das etwas mehr mit der Farbeingabe macht, indem es die change- und input-Ereignisse verfolgt, um die neue Farbe zu übernehmen und jedem <p>-Element im Dokument zuzuweisen.

Das HTML ist ziemlich einfach — ein paar Absätze mit beschreibendem Material mit einem <input>-Element vom Typ color mit der ID color-picker, das wir verwenden werden, um die Farbe des Textes der Absätze 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>

Zuerst gibt es einige Vorbereitungen. Hier richten wir einige Variablen ein, wobei wir eine Variable aufstellen, die die Farbe enthält, auf die wir den Farbwähler beim ersten Laden setzen, und anschließend einen load-Handler festlegen, um die hauptsächliche Startarbeit zu erledigen, 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-Ereignishandler, 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 erhält eine Referenz zum Farbe <input>-Element in einer Variablen namens colorPicker, setzt dann den Wert der Farbeingabe auf den Wert von defaultColor. Dann wird das input-Ereignis der Farbeingabe so eingerichtet, dass es unsere updateFirst()-Funktion aufruft, und das change-Ereignis wird so eingerichtet, dass es updateAll() aufruft. Diese sind beide unten zu sehen.

Schließlich rufen wir select() auf, um den Textinhalt der Farbeingabe auszuwählen, wenn das Steuerungselement als Textfeld implementiert ist (dies hat keine Wirkung, wenn stattdessen eine Farbwähler-Schnittstelle bereitgestellt wird).

Reaktion auf Farbänderungen

Wir bieten zwei Funktionen an, die mit Farbänderungen umgehen. Die Funktion updateFirst() wird als Reaktion auf das input-Ereignis aufgerufen. Sie ändert die Farbe des ersten Absatzelements im Dokument, um den neuen Wert der Farbeingabe widerzuspiegeln. Da input-Ereignisse jedes Mal ausgelöst werden, wenn eine Anpassung am Wert vorgenommen wird (zum Beispiel, wenn die Helligkeit der Farbe erhöht wird), werden diese wiederholt ausgeführt, 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 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 Funktion updateAll(), wobei wir Event.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 sein color-Attribut dem aktuellen Wert der Farbeingabe entspricht, der über event.target referenziert wird.

Das Endergebnis sieht so aus: