Sélection d’une couleur en HTML5 : input type color

Une petite astuce aujourd’hui pour pallier aux lourdes librairies javascript de Color Picker, le type color d’un champ input en HTML5.

Sélection d’une couleur en HTML5 grâce au champ input type color

Présentation du code input

On ne va pas s’attarder sur de nombreuses explications et nous allons passer directement à la présentation du code. En HTML5 le type color fait son apparition et est très vite implémenté dans les navigateurs modernes.
Voyons cela :

Voir le code sur CodePen.io

Évènements à écouter

Comme la plupart des champs de formulaire, le type color est audible sur 2 évènements principaux : input et change.

Validation du champ

C’est pas pour vous embêter avec les détails mais pour ceux que ça intéresse, si le navigateur ne parvient pas à convertir la saisie de l’utilisateur en valeur hexadécimale, alors la pseudo-class CSS :invalid sera appliquée à l’élément. Du coup les webdesigners sont contents.

Valeur de retour

C’est bien beau de pouvoir choisir une couleur dans un formulaire mais que me retourne ce champ ?

Comme il n’est pas encore possible de définir un pattern à l’heure de l’écriture de cet article, le input type color ne renvoie qu’une valeur hexadécimale de la couleur sélectionnée.
Il est vivement recommandé d’attribuer une valeur par défaut grâce à l’attribut HTML value. Sinon, par défaut ce champs affichera du noir (#000000).

Prise en charge des navigateurs pour le type color

Actuellement la prise en charge n’est pas exceptionnelle. Elle va varier en fonction de l’OS et du navigateur.
Je vous invite à lire le tableau de prise en charge de Mozilla.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *