<input type="color">

Der value eines <input>-Elements vom Typ color ist immer ein String, der einen RGB-Farbcode im Hexadezimalformat als 7-Zeichen-String angibt. Während Sie die Farbe entweder in Groß- oder Kleinbuchstaben eingeben können, wird sie in Kleinbuchstaben gespeichert. Der Wert liegt nie in einem anderen Format vor und ist nie leer.

Eingaben vom Typ color sind einfach, da sie nur eine begrenzte Anzahl an Attributen unterstützen.

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

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

Wenn Sie keinen Wert angeben, ist die Vorgabe #000000, was Schwarz ist. Der Wert muss in siebenstelliger Hexadezimalnotation vorliegen, was das Zeichen "#" gefolgt von jeweils zwei Ziffern für Rot, Grün und Blau bedeutet, etwa so: #rrggbb. Wenn Sie Farben in einem anderen Format haben (wie z. B. CSS-Farbnamen oder CSS-Farbfunktionen wie rgb() oder hsl()), müssen Sie diese in Hexadezimal umwandeln, bevor Sie den value-Wert festlegen.

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 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 bestimmen, indem Sie seinen value-Wert betrachten.

Hier ist ein Beispiel, das die Änderungen des Farbwerts im Laufe der Zeit 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 select()-Methode verwenden, um den aktuell im Bearbeitungsfeld befindlichen Text auszuwählen.

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

colorPicker.select();

Ein Farbeingabewert gilt als ungültig, wenn der user agent nicht in der Lage ist, die Benutzereingabe in eine siebenstellige, kleingeschriebene Hexadezimalnotation umzuwandeln. Ist dies der Fall, wird die :invalid-Pseudoklasse auf das Element angewendet.

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

Das HTML ist ziemlich unkompliziert – ein paar Absätze mit beschreibendem Material und ein <input> vom Typ color mit der ID color-picker, die wir verwenden werden, um die Textfarbe 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 etwas Einrichtung. Hier legen wir einige Variablen fest, indem wir eine Variable einrichten, die die Farbe enthält, auf die wir den Farbwähler beim ersten Laden einstellen werden, und dann eine load-Handler einrichten, der die Hauptinitialisierung durchführt, 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 ruft eine Referenz auf das <input>-Element in einer Variablen namens colorPicker ab und setzt dann den value-Wert der Farbeingabe auf den Wert in defaultColor. Dann wird das input-Ereignis der Farbeingabe so konfiguriert, dass unsere updateFirst()-Funktion aufgerufen wird, und das change-Ereignis so, dass updateAll() aufgerufen wird. Diese werden jeweils unten gezeigt.

Zum Schluss rufen wir select() auf, um den Textinhalt der Farbeingabe auszuwählen, falls die Steuerung als Textfeld implementiert ist (dies hat keine Auswirkung, wenn stattdessen eine Farbwähleroberfläche bereitgestellt wird).

Reagieren auf Farbänderungen

Wir stellen zwei Funktionen bereit, die sich mit Farbänderungen befassen. Die updateFirst()-Funktion wird in Reaktion auf das input-Ereignis aufgerufen. Sie ändert die Farbe des ersten Absatz-Elements im Dokument, sodass es dem neuen Wert der Farbeingabe entspricht. 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), erfolgen diese Änderungen 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 anzeigt, dass der Wert sich nicht mehr ändert (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 dem aktuellen Wert der Farbeingabe entspricht, der mit event.target referenziert wird.

Das Endergebnis sieht folgendermaßen aus: