Cliquez sur le déclencheur HTML 5 pour sélectionner les couleurs avec JQuery

Dans JQuery, nous pouvons déclencher un “clic” sur n’importe quel élément avec:

$(selector).sortinggger('click');

Bien que j’ai du mal à le faire lorsque l’élément est un sélecteur de couleur HTML 5 et que la propriété “display” est définie sur “none” par CSS.

Normalement, nous pouvons le faire si le type d’entrée est ‘fichier’ ou …

Alors, y a-t-il un moyen de faire cela avec JQuery ou le javascript?

Éléments HTML

 input type="color" id="fontSel" style="display: none;" div id="fontWrap"

JQuery

 $("#fontWrap").click(function(){ $("#fontSel").sortinggger("click"); });

RÉPONSE

Changer le style en:

 input type="color" id="fontSel" style="position:absolute; left:-9999px; top:-9999px;"

Cela nécessite une interaction de l’utilisateur, ce qui signifie que vous ne pouvez pas le déclencher sans que l’utilisateur clique quelque part dans le document:

DEMO

 $("#fontWrap").click(function () { $("#fontSel")[0].click(); });

La réponse acceptée fonctionne très bien, sauf que cela ne fonctionne pas dans MS Edge (personnellement, je ne l’aime pas beaucoup, mais cela rest une part de marché de 6% à partir de 2017, ce qui signifie que chaque ~ 15e visiteur de votre site web l’a

Voici donc un bon vieux truc “hover-hack” qui fonctionne dans tous les navigateurs:

Et liez ensuite onchange à l’élément color pour obtenir la valeur sélectionnée. Expérimentez avec des largeurs / hauteurs pour votre disposition

https://jsfiddle.net/Lnzm0sry/2/

PS Je sais que c’est “hacky”, mais je n’ai pas une meilleure idée.