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 :
É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.
Mes sources
Infographiste passionné par son métier, il passe le plus clair de son temps à vouloir tout apprendre et tout savoir faire. Heureusement les journées sont limitées à 24 heures.
Aujourd’hui spécialisé dans la mise en page (maquettiste PAO) et dans le webdesign, il a tendance à déborder sur la 3D et la vidéo quand le temps le lui permet.