<input type="color">

Der value eines <input> Elements vom Typ color ist immer ein String, der eine 7-Zeichenfolge im Hexadezimalformat angibt. Während Sie die Farbe entweder in Groß- oder Kleinschreibung 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 unterstützter Attribute.

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

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

Wenn Sie keinen Wert angeben, ist der Standard #000000, was schwarz ist. Der Wert muss in siebenstelliger Hexadezimalnotation sein, was bedeutet, dass das "#" Zeichen von zwei Ziffern gefolgt wird, die jeweils Rot, Grün und Blau darstellen, wie folgt: #rrggbb. Wenn Sie Farben in einem anderen Format haben (wie CSS-Farbnamen oder CSS-Farbfunktionen wie rgb() oder hsl()), müssen Sie diese in Hexadezimal umwandeln, bevor Sie den value festlegen.

Wie bei anderen <input> Typen gibt es auch hier zwei Ereignisse, die verwendet werden können, um Änderungen des Farbwerts zu erkennen: input und change. input wird beim <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 Betrachten seines value bestimmen.

Hier ist ein Beispiel, das im Laufe der Zeit Änderungen am Farbwert ü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 Schnittstelle zum Farbwählen unterstützt, wird seine Implementierung von Farbeingaben ein Textfeld sein, das den Inhalt automatisch validiert, um sicherzustellen, dass der Wert im korrekten Format ist. In diesem Fall können Sie die select() Methode verwenden, um den Text im Bearbeitungsfeld auszuwählen.

Wenn der Browser stattdessen einen Farbwähler verwendet, tut select() nichts. Sie sollten sich dieses Verhaltens bewusst sein, damit Ihr Code entsprechend reagieren kann.

colorPicker.select();

Ein Farbinput-Wert gilt als ungültig, wenn der User Agent nicht in der Lage ist, die Benutzereingabe in siebenstellige, klein geschriebene Hexadezimalnotation umzuwandeln. Wenn dies der Fall ist, wird die :invalid Pseudoklasse auf das Element angewendet.

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

Das HTML ist ziemlich einfach — ein paar Absätze mit beschreibendem Material mit einem <input> 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 ein bisschen Vorarbeit. Hier legen wir einige Variablen fest, indem wir eine Variable definieren, die die Farbe enthält, auf die wir den Farbwähler beim ersten Laden setzen werden, und dann einen load Handler einrichten, um die Hauptarbeit 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, dann wird der Farbinput-Wert auf den Wert in defaultColor gesetzt. Dann wird das input Ereignis des Farbinputs so eingerichtet, dass unsere updateFirst() Funktion aufgerufen wird, und das change Ereignis so, dass updateAll() aufgerufen wird. Diese sind beide unten zu sehen.

Schließlich rufen wir select() auf, um den Textinhalt des Farbeingabefeldes auszuwählen, falls die Steuerung als Textfeld implementiert ist (dies hat keine Wirkung, wenn stattdessen eine Farbwähler-Schnittstelle bereitgestellt wird).

Reaktion auf Farbänderungen

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 Abschnitts im Dokument, um den neuen Wert des Farbeingabefeldes 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), 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 anzeigt, dass sich der Wert nicht mehr ändern wird (es sei denn, der Benutzer öffnet den Farbwähler erneut), wird dem Element ein change Ereignis 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 mit event.target verwiesen wird.

Das Endergebnis sieht so aus: