<input type="color">

L'attribut value d'un élément <input type="color"> est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour Green en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide.

Les éléments <input type="color"> sont simples à utiliser (notamment en raison du faible nombre d'attributs qu'ils gèrent).

Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut :

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

Si aucune valeur n'est indiquée, c'est "#000000" qui sera utilisée par défaut (la couleur noire). Comme indiqué dans la note ci-avant, la valeur de cet attribut doit être de la forme "#rrggbb". Pour les couleurs dans un autre format (couleurs nommées CSS ou couleurs calculées à l'aide des fonctions rgb() ou rgba()), il faudra les convertir au format hexadécimal avant de les utiliser pour value.

Comme pour les différents éléments <input>, deux évènements peuvent être utilisés afin de détecter une modification de la couleur : input et change. input est déclenché sur l'élément <input> à chaque fois que la couleur change. L'évènement change est déclenché lorsque l'utilisateur ferme le sélecteur de couleur. Dans tous les cas, il est possible de déterminer la nouvelle valeur de l'élément grâce à value.

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

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

Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode select(). Si le navigateur affiche un sélecteur de couleur, select() ne fera rien. Soyez conscient⋅e de ce comportement afin d'adapter votre code à ce cas.

colorWell.select();

La valeur d'un tel champ est considérée invalide si l'interface utilisateur ne parvient pas à convertir la saisie de l'utilisateur en une notation hexadécimale sur sept caractères et en minuscules. Si c'est le cas, la pseudo-classe CSS :invalid sera appliquée à l'élément.

Créons un exemple qui utilise un sélecteur de couleur et les évènements change et input afin de choisir une nouvelle couleur et de l'appliquer sur chaque élément <p> du document.

Le fragment de code HTML utilisé est relativement simple. On utilise quelques paragraphes descriptifs ainsi qu'un élément <input> de type "color" dont l'identifiant est "colorWell" (c'est la valeur de cette couleur qu'on utilisera pour changer la couleur du texte des paragraphes).

<p>
  Un exemple qui illustre l'utilisation de
  <code>&lt;input type="color"&gt;</code>.
</p>

<label for="colorWell">Couleur :</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Vous pouvez ici voir que la couleur du premier paragraphe changer lorsqu'on
  ajuste la valeur dans le sélecteur. Pour cela, on utilise l'évènement
  <code>input</code>. Lorsqu'on ferme le sélecteur, l'évènement
  <code>change</code> est déclenché et on applique la modification est appliquée
  à l'ensemble des paragraphes.
</p>

Tout d'abord, on établit certains variables : une pour la couleur du sélecteur et une autre couleur pour la couleur par défaut. On ajoute un gestionnaire load afin de lancer les actions de démarrage lorsque la page est chargée.

var colorWell;
var defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

Initialisation

Lorsque la page est chargée, l'évènement "load" est déclenché et la fonction startup() est donc appelée :

function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

Dans cette fonction, on utilise la variable colorWell déclarée plus haut et on remplit sa valeur avec la valeur par défaut (la valeur de defaultColor). Ensuite, on indique les gestionnaires d'évènements : input appellera updateFirst() et change appellera updateAll() qui seront détaillés ensuite.

Enfin, on appelle select() afin de sélectionner le texte du champ si le contrôle est un champ texte.

Réagir suite aux modifications de couleurs

On dispose de deux fonctions qui gèrent les modifications de couleurs. La fonction updateFirst() permet de répondre à l'évènement input et modifie la couleur du premier paragraphe dans le document en utilisant la nouvelle valeur saisie. Étant donné que les évènements input ont lieu à chaque fois qu'un ajustement est fait, cette fonction sera appelée sans cesse lorsque le sélecteur de couleur est utilisé.

function updateFirst(event) {
  var p = document.querySelector("p");

  if (p) {
    p.style.color = event.target.value;
  }
}

Lorsque le sélecteur est fermé, cela signifie que la valeur ne sera plus modifié avant une prochaine ouverture du sélecteur. Un évènement change est alors envoyé et cela déclenche alors l'appel de la fonction updateAll() :

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

Cela permet de modifier la couleur de chaque bloc <p> du document afin que la couleur (cf. color) soit celle sélectionnée dans le contrôle. Pour récupérer cette valeur, on utilise l'objet event.target.