<input type="color">

Der value eines <input>-Elements vom Typ color ist immer ein String, der einen RGB-Farbwert im hexadezimalen Format enthält. Auch wenn Sie die Farbe in Groß- oder Kleinbuchstaben eingeben können, wird sie in Kleinbuchstaben gespeichert. Der Wert ist niemals in einer anderen Form und ist niemals leer.

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

Sie können das obige Beispiel aktualisieren, um einen Standardwert festzulegen, sodass der Farbpicker mit der Standardfarbe vorab ausgefüllt wird und der Farbwähler (falls vorhanden) ebenfalls 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 der siebenstelligen hexadezimalen Notation angegeben werden, das bedeutet das "#" Zeichen gefolgt von je zwei Ziffern für Rot, Grün und Blau, wie folgt: #rrggbb. Wenn Sie Farben in einem anderen Format (wie CSS-Farbnamen oder CSS-Farbfunktionsätze wie rgb() oder hsl()) haben, müssen Sie diese in das hexadezimale Format umwandeln, bevor Sie den value 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 bei jedem Farbwechsel auf dem <input>-Element ausgelöst. 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 sich dessen value ansehen.

Hier ist ein Beispiel, das Änderungen im Laufe der Zeit 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 Farbwähler-Oberfläche unterstützt, wird die 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 Methode select() verwenden, um den aktuell im Bearbeitungsfeld vorhandenen Text auszuwählen.

Wenn der Browser stattdessen einen Farbwähler verwendet, bewirkt 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 betrachtet, wenn der User Agent nicht in der Lage ist, die Eingaben des Benutzers in eine siebenstellige hexadezimale Notation in Kleinbuchstaben umzuwandeln. Falls und wenn dies der Fall ist, wird die :invalid Pseudoklasse auf das Element angewendet.

Erstellen wir ein Beispiel, das etwas mehr mit der Farbeingabe macht, indem wir die change und input Ereignisse überwachen, um die neue Farbe zu übernehmen und auf jedes <p> Element im Dokument anzuwenden.

Das HTML ist ziemlich einfach — ein paar Absätze mit beschreibendem Material und ein <input> vom Typ color mit der ID color-picker, die wir verwenden, 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>

Zunächst gibt es einige Vorbereitungen. Hier legen wir einige Variablen fest, richten eine Variable ein, die die Farbe enthält, die wir beim ersten Laden des Farbwählers einstellen, und richten einen load Handler ein, der die Hauptstartprozedur ausfü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 erhält eine Referenz auf das color <input> Element in einer Variable namens colorPicker und setzt dann den Wert des Farbeingabe-Elements auf den Wert in defaultColor. Dann wird das input Ereignis des Farbeingabe-Elements so eingestellt, dass es unsere updateFirst() Funktion aufruft, und das change Ereignis wird so eingestellt, dass es updateAll() aufruft. Diese sind beide unten zu sehen.

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

Reaktion auf Farbänderungen

Wir bieten zwei Funktionen an, die mit Farbänderungen umgehen. Die updateFirst() Funktion wird als Reaktion auf das input Ereignis aufgerufen. Sie ändert die Farbe des ersten Absatzelements im Dokument so, dass sie mit dem neuen Wert der Farbeingabe übereinstimmt. 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 Vorgänge wiederholt auftreten, 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 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 unter Verwendung von 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 mit dem aktuellen Wert der Farbeingabe übereinstimmt, auf die durch event.target Bezug genommen wird.

Das endgültige Ergebnis sieht folgendermaßen aus:

• Kompatibilität von CSS-Eigenschaften