<input type="color">

Der value eines <input>-Elements des Typs color ist immer ein String, der einen 7-Zeichen-String enthält, der eine RGB-Farbe im Hexadezimalformat angibt. Während man die Farbe sowohl in Groß- als auch in Kleinbuchstaben eingeben kann, wird sie in Kleinbuchstabenform gespeichert. Der Wert ist immer in keiner anderen Form und 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, so dass der Farbwähler mit der Standardfarbe vorausgefüllt ist und der Farbwähler (falls vorhanden) auch 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 einer siebenstelligen Hexadezimalnotation angegeben werden, d.h. das "#" Zeichen gefolgt von zwei Ziffern, die jeweils Rot, Grün und Blau darstellen, so wie hier: #rrggbb. Wenn Sie Farben haben, die in einem anderen Format vorliegen (wie z.B. CSS-Farbnamen oder CSS-Farbfunktionen wie rgb() oder hsl()), müssen Sie diese vor dem Festlegen des value in Hexadezimalformat konvertieren.

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 gefeuert, 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 anschauen.

Hier ist ein Beispiel, das Änderungen im Verlauf des Farbwertes verfolgt:

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 Farbauswahloberfläche unterstützt, wird seine Implementierung von Farbeingaben ein Textfeld sein, 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 Text im Bearbeitungsfeld auszuwählen.

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

colorPicker.select();

Ein Farbwert wird als ungültig betrachtet, wenn der User-Agent den Benutzereingabe nicht in eine siebenstellige, kleingeschriebene Hexadezimalnotation umwandeln kann. Sollte dies der Fall sein, wird die :invalid-Pseudoklasse auf das Element angewendet.

Wir erstellen ein Beispiel, das etwas mehr mit der Farbeingabe macht, indem es die Ereignisse change und input verfolgt, um die neue Farbe auf jedes <p>-Element im Dokument anzuwenden.

Das HTML ist ziemlich einfach — ein paar Absätze mit beschreibendem Material und einem <input> des Typs color mit der ID color-picker, den 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 ein bisschen Vorbereitung. Hier definieren wir einige Variablen, richten eine Variable ein, die die Farbe enthält, auf die wir den Farbwähler beim ersten Laden einstellen, und richten dann einen load-Handler ein, der die Hauptstartsarbeit erledigt, 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 bekommt eine Referenz zum Farb-<input>-Element in einer Variablen namens colorPicker, dann wird der Wert der Farbeingabe auf den Wert in defaultColor gesetzt. Dann wird das input-Ereignis der Farbeingabe aufgerufen, um unsere updateFirst()-Funktion zu rufen, und das change-Ereignis wird gesetzt, um updateAll() zu rufen. Diese werden beide unten gezeigt.

Schließlich 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 Farbauswahloberfläche bereitgestellt wird).

Reagieren auf Farbänderungen

Wir bieten zwei Funktionen, 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 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), wird dies wiederholt geschehen, während der Farbwähler benutzt wird.

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

Wenn der Farbwähler geschlossen wird, was anzeigt, dass der Wert sich 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, indem 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, auf die mithilfe von event.target verwiesen wird.

Das endgültige Ergebnis sieht folgendermaßen aus: