<input type="color">

Der value eines <input> Elements des Typs color ist immer ein String, der einen RGB-Farbwert im Hexadezimalformat als 7-Zeichen-String enthält. Während Sie die Farbe sowohl in Groß- als auch in Kleinbuchstaben eingeben können, wird sie in Kleinbuchstaben gespeichert. Der Wert liegt niemals in einer anderen Form vor und ist nie leer.

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

Sie können das obige Beispiel aktualisieren, um einen Standardwert einzustellen, sodass 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 Standardwert #000000, was Schwarz ist. Der Wert muss in siebenstelliger Hexadezimalnotation angegeben werden, das heißt das "#" Zeichen gefolgt von zwei Ziffern für Rot, Grün und Blau, so: #rrggbb. Wenn Sie Farben in einem anderen Format haben (wie CSS-Farbnamen oder CSS-Farb-Funktionen wie rgb() oder hsl()), müssen Sie diese vor dem Setzen des value in Hexadezimal umwandeln.

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 die Farbauswahl beendet. In beiden Fällen können Sie den neuen Wert des Elements feststellen, indem Sie dessen value betrachten.

Hier ist ein Beispiel, das Änderungen des Farbwerts über die 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-Schnittstelle unterstützt, wird seine Implementierung der Farbeingaben ein Textfeld sein, das die Inhalte automatisch validiert, um sicherzustellen, dass der Wert im korrekten Format vorliegt. In diesem Fall können Sie die select() Methode verwenden, um den aktuell im Bearbeitungsfeld ausgewählten Text zu markieren.

Wenn der Browser stattdessen eine Farbauswahl verwendet, hat select() keine Wirkung. Sie sollten sich dieses Verhaltens bewusst sein, damit Ihr Code in beiden Fällen angemessen reagiert.

colorPicker.select();

Der Wert einer Farbeingabe wird als ungültig angesehen, wenn der Nutzeragent nicht in der Lage ist, die Eingabe des Benutzers in eine siebenstellige Hexadezimalnotation in Kleinbuchstaben zu konvertieren. In diesem Fall wird die :invalid Pseudoklasse auf das Element angewendet.

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

Das HTML ist ziemlich einfach — ein paar Absätze beschreibenden Materials mit einem <input> des Typs color mit der ID color-picker, das wir verwenden, 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 erfolgt etwas Einrichtung. Hier richten wir einige Variablen ein, indem wir eine Variable definieren, die die Farbe enthält, die wir für die Farbauswahl einstellen, wenn wir sie zum ersten Mal laden, und dann einen load Handler einstellen, um die grundlegende 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();
}

Dieser erhält eine Referenz zum Farbe <input> Element in einer Variablen namens colorPicker und setzt dann den Wert des Farbeingabefelds auf den Wert in defaultColor. Dann wird das input Ereignis der Farbeingabe so eingerichtet, dass unsere Funktion updateFirst() aufgerufen wird, und das change Ereignis wird so eingestellt, dass updateAll() aufgerufen wird. Diese beiden werden unten gezeigt.

Am Ende rufen wir select() auf, um den Textinhalt des Farbeingabefelds auszuwählen, wenn das Steuerelement als Textfeld implementiert ist (dies hat keine Wirkung, wenn stattdessen eine Schnittstelle für die Farbauswahl bereitgestellt wird).

Reagieren 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 Absatz-Elements im Dokument, um dem neuen Wert der Farbeingabe zu entsprechen. 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), passieren 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 bedeutet, 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, 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, der mit event.target referenziert wird.

Das Endergebnis sieht so aus: