<input type='color'>

Der value eines <input> Elements des Typs color ist immer ein Zeichenfolgenwert, der einen RGB-Farbwert im Hexadezimalformat mit 7 Zeichen angibt. Während Sie die Farbe in Groß- oder Kleinschreibung eingeben können, wird sie in Kleinbuchstaben gespeichert. Der Wert liegt niemals in einem anderen Format vor und ist niemals leer.

Eingaben des Typs color sind einfach aufgrund der begrenzten Anzahl von Attributen, die sie unterstützen.

Sie können das einfache Beispiel oben aktualisieren, um einen Standardwert festzulegen, damit der Farbwähler mit der Standardfarbe vorab ausgefü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 Standardwert #000000, was schwarz ist. Der Wert muss in der siebenstelligen Hexadezimalschreibweise angegeben werden, was bedeutet, dass das "#" Zeichen gefolgt von zwei Ziffern steht, die jeweils Rot, Grün und Blau darstellen, wie dies: #rrggbb. Wenn Sie Farben in einem anderen Format haben (wie CSS-Farbnamen oder CSS-Farbfunctions wie rgb() oder hsl()), müssen Sie sie in Hexadezimalschreibweise konvertieren, bevor Sie den value festlegen.

Wie bei anderen <input> Typen gibt es zwei Ereignisse, mit denen Sie Änderungen des Farbwerts erfassen können: input und change. input wird jedes Mal auf dem <input>-Element 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 ermitteln, indem Sie dessen value betrachten.

Hier ist ein Beispiel, das Änderungen im Laufe der Zeit des Farbwerts ü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 Farbauswahloberfläche unterstützt, wird seine Implementierung von Farbeingaben ein Textfeld sein, das den Inhalt automatisch überprüft, um sicherzustellen, dass der Wert im korrekten Format vorliegt. In diesem Fall können Sie die Methode select() verwenden, um den aktuell im Bearbeitungsfeld enthaltenen Text auszuwählen.

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

colorPicker.select();

Der Wert einer Farbeingabe wird als ungültig angesehen, wenn der Benutzeragent nicht in der Lage ist, die Benutzereingabe in eine siebenstellige Hexadezimalschreibweise in Kleinbuchstaben umzuwandeln. Wenn dies der Fall ist, wird die :invalid Pseudo-Klasse auf das Element angewandt.

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 zu nehmen und sie auf alle <p> Elemente im Dokument anzuwenden.

Das HTML ist ziemlich einfach – ein paar Absätze mit beschreibendem Material mit einem <input> des Typs color mit der ID color-picker, die 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 gibt es einige Vorbereitungen. Hier richten wir einige Variablen ein, einschließlich einer Variablen, die die Farbe enthält, die wir beim ersten Laden des Farbwählers verwenden werden, und dann legen wir einen load Handler fest, der die Hauptstartarbeit 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 holt eine Referenz auf das Farbe <input> Element in einer Variablen namens colorPicker, dann wird der Wert der Farbeingabe auf den Wert von defaultColor gesetzt. Dann wird das input Ereignis der Farbeingabe so eingerichtet, dass es unsere updateFirst() Funktion aufruft, und das change Ereignis wird so eingerichtet, dass es updateAll() aufruft. Diese werden beide unten gelenkt.

Schließlich rufen wir select() auf, um den Textinhalt des Farbeingabefelds auszuwählen, wenn das Steuerelement als Textfeld implementiert ist (dies hat keinen Effekt, wenn stattdessen eine Farbwähler-Oberfläche bereitgestellt wird).

Reaktion auf Farbänderungen

Wir bieten zwei Funktionen, die sich mit Farbänderungen befassen. Die updateFirst() Funktion wird als Antwort auf das input Ereignis aufgerufen. Es ändert die Farbe des ersten Absatzelements im Dokument so, dass es dem neuen Wert der Farbeingabe entspricht. 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 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 darauf hinweist, 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 bearbeiten 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, sodass sein color Attribut mit dem aktuellen Wert der Farbeingabe übereinstimmt, auf das durch event.target verwiesen wird.

Das Endergebnis sieht wie folgt aus:

• Kompatibilität von CSS-Eigenschaften