Het element <input type="color">

Waarde

Een CSS-kleurwaarde.

Aanvullende attributen

Naast het globale attribuut en de input-attributen die alle <input>-elementen gemeen hebben, ondersteunt de color-invoer ook de volgende attributen:

Kleurinvoervelden gebruiken

Invoervelden van het type color zijn eenvoudig, vanwege het beperkte aantal attributen dat ze ondersteunen.

Een standaardkleur opgeven

Je kunt het bovenstaande voorbeeld bijwerken om een standaardwaarde in te stellen, zodat de kleurkiezer vooraf wordt gevuld met de standaardkleur en de kleurkiezer (indien aanwezig) ook standaard die kleur gebruikt.

<input type="color" value="#ff0000" />
<input
  type="color"
  id="body"
  name="body"
  value="oklab(50% 0.1 0.1 / 0.5)"
  colorspace="display-p3"
  alpha />

Als je geen waarde opgeeft of als de waarde ongeldig is of anderszins niet wordt ondersteund door de browser, is de standaardwaarde #000000, wat ondoorzichtig zwart is.

Kleurwijzigingen bijhouden

Zoals bij andere <input>-typen, zijn er twee events die kunnen worden gebruikt om wijzigingen in de kleurwaarde te detecteren: input en change. input wordt telkens geactiveerd op het <input>-element wanneer de kleur verandert. Het change-event wordt geactiveerd wanneer de gebruiker de kleurkiezer sluit. In beide gevallen kun je de nieuwe waarde van het element bepalen door naar de value ervan te kijken.

Hier is een voorbeeld dat wijzigingen in de kleurwaarde in de loop van de tijd volgt:

colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", watchColorPicker);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

De waarde selecteren

Als een browser geen kleurkiezerinterface ondersteunt, zal de implementatie van kleurinvoervelden een tekstvak zijn dat de inhoud automatisch valideert om ervoor te zorgen dat de waarde in het juiste formaat staat. In dat geval kun je de methode select() gebruiken om de tekst die momenteel in het invoerveld staat te selecteren.

Als de browser in plaats daarvan een kleurkiezer gebruikt, doet select() niets. Je moet je bewust zijn van dit gedrag, zodat je code in beide gevallen op de juiste manier kan reageren.

colorPicker.select();

Validatie

De waarde van een kleurinvoerveld wordt als ongeldig beschouwd als de user agent de invoer van de gebruiker niet kan omzetten naar een kleinletter hexadecimale notatie van zeven tekens. Als en wanneer dit het geval is, wordt de pseudo-klasse :invalid toegepast op het element.

Voorbeeld

Laten we een voorbeeld maken dat iets meer doet met de kleurinvoer door de events change en input bij te houden om de nieuwe kleur toe te passen op elk <p>-element in het document.

HTML

De HTML is vrij eenvoudig — een paar alinea's beschrijvende tekst met een <input> van het type color met de ID color-picker, die we gebruiken om de kleur van de tekst in de alinea's te wijzigen.

<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>

JavaScript

Initialisatie

De volgende code initialiseert de kleurinvoer:

const defaultColor = "#0000ff";
const colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", updateAll);
colorPicker.select();

Dit haalt een verwijzing naar het <input>-element van het type color op in een variabele genaamd colorPicker, en stelt vervolgens de waarde van de kleurinvoer in op de waarde van defaultColor. Vervolgens wordt het input-event van de kleurinvoer ingesteld om onze functie updateFirst() aan te roepen, en wordt het change-event ingesteld om updateAll() aan te roepen. Beide worden hieronder getoond.

Ten slotte roepen we select() aan om de tekstinhoud van de kleurinvoer te selecteren als het besturingselement is geïmplementeerd als een tekstveld (dit heeft geen effect als in plaats daarvan een kleurkiezerinterface wordt aangeboden).

Reageren op kleurwijzigingen

We bieden twee functies die kleurwijzigingen afhandelen. De functie updateFirst() wordt aangeroepen als reactie op het input-event. Deze wijzigt de kleur van het eerste alinea-element in het document zodat deze overeenkomt met de nieuwe waarde van de kleurinvoer. Omdat input-events telkens worden geactiveerd wanneer er een aanpassing aan de waarde wordt gemaakt (bijvoorbeeld als de helderheid van de kleur wordt verhoogd), gebeurt dit herhaaldelijk terwijl de kleurkiezer wordt gebruikt.

function updateFirst(event) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

Wanneer de kleurkiezer wordt gesloten, wat aangeeft dat de waarde niet opnieuw zal veranderen (tenzij de gebruiker de kleurkiezer opnieuw opent), wordt een change-event naar het element gestuurd. We handelen dat event af met de functie updateAll(), met behulp van Event.target.value om de uiteindelijk geselecteerde kleur te verkrijgen:

function updateAll(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Dit stelt de kleur van elk <p>-blok zo in dat het color-attribuut ervan overeenkomt met de huidige waarde van de kleurinvoer, waarnaar wordt verwezen met event.target.

Resultaat

Het eindresultaat ziet er als volgt uit:

Technische samenvatting