<input type="color">

Der value eines <input> Elements des Typs color ist immer eine Zeichenkette, die eine 7-stellige Zeichenkette enthält, die eine RGB-Farbe im Hexadezimalformat angibt. Sie können die Farbe in Groß- oder Kleinbuchstaben eingeben, sie wird jedoch in Kleinbuchstaben gespeichert. Der Wert liegt niemals in einer anderen Form vor und ist niemals leer.

Eingaben des Typs color sind einfach, aufgrund der begrenzten Anzahl der unterstützten Attribute.

Sie können das obige Beispiel aktualisieren, um einen Standardwert festzulegen, sodass der Farbwähler mit der Standardfarbe vorgefüllt ist und der Farbwähler (falls vorhanden) ebenfalls diese Standardfarbe verwendet:

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

Wenn Sie keinen Wert angeben, ist der Standard #000000, was schwarz ist. Der Wert muss in der siebenstelligen Hexadezimalschreibweise vorliegen, was bedeutet, dass das Zeichen "#" gefolgt von zwei Ziffern steht, die jeweils Rot, Grün und Blau darstellen, so: #rrggbb. Wenn Sie Farben in einem anderen Format haben (wie CSS-Farbnamen oder CSS-Farbfunktionen wie rgb() oder hsl()), müssen Sie diese vor dem Festlegen 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 auf dem <input>-Element jedes Mal ausgelöst, wenn die Farbe geändert wird. 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 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 Farbauswahl-Oberfläche unterstützt, wird seine Implementierung von Farbeingaben ein Textfeld sein, das die Inhalte 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, tut select() nichts. Sie sollten sich dieses Verhaltens bewusst sein, damit Ihr Code in beiden Fällen angemessen reagieren kann.

colorPicker.select();

Ein Farbinput-Wert wird als ungültig betrachtet, wenn der User-Agent die Benutzereingabe nicht in siebenstelliges, kleingeschriebenes Hexadezimalformat umwandeln kann. Wenn dies der Fall ist, wird die Pseudo-Klasse :invalid auf das Element angewendet.

Lassen Sie uns ein Beispiel erstellen, das ein wenig mehr mit dem Farbeingabe-Element macht, indem es die change und input Ereignisse verfolgt, um die neue Farbe zu nehmen und sie auf jedes <p> Element im Dokument anzuwenden.

Das HTML ist ziemlich einfach — ein paar Absätze beschreibendes Material mit einem <input> des Typs color mit der ID color-picker, die verwendet wird, 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" 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, setzen eine Variable, die die Farbe enthält, auf die wir den Farbwähler beim ersten Laden setzen, und richten dann einen load Handler ein, um die Hauptarbeiten beim Start durchzuführen, 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 zu dem Farbe <input> Element in einer Variablen namens colorPicker, dann setzt es den Wert des Farbeingabefelds auf den Wert in defaultColor. Dann wird das input Ereignis des Farbeingabefelds eingerichtet, um unsere updateFirst() Funktion aufzurufen, und das change Ereignis, um updateAll() aufzurufen. Diese sind beide unten zu sehen.

Schließlich rufen wir select() auf, um den Textinhalt des Farbeingabefelds auszuwählen, falls die Steuerung als Textfeld implementiert ist (dies hat keine Auswirkung, wenn eine Farbwahl-Oberfläche stattdessen bereitgestellt wird).

Auf Farbänderungen reagieren

Wir stellen zwei Funktionen bereit, die mit Farbänderungen umgehen. Die updateFirst()-Funktion wird als Reaktion auf das input-Ereignis aufgerufen. Sie ändert die Farbe des ersten Absatz-Elements im Dokument, um mit dem neuen Wert der Farbeingabe übereinzustimmen. 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 ausgelöst, 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 nicht mehr geändert wird (es sei denn, der Benutzer öffnet den Farbwähler erneut), wird ein change-Ereignis an das Element gesendet. Wir bearbeiten dieses Ereignis mithilfe der updateAll() Funktion, 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 mit dem aktuellen Wert der Farbeingabe übereinstimmt, auf die mit event.target verwiesen wird.

Das Endergebnis sieht so aus: