Search code examples
jqueryhtmlcolor-picker

Trigger click on HTML 5 color picker with JQuery

Within JQuery we are able to trigger 'click' on any given element with:

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

Though i have difficulties doing so when the element is a HTML 5 color picker and the 'display' property is set to 'none' by CSS.

Normally we can do this if the input type is 'file' or ...

So is there anyway to get this done with JQuery or plain javascript?

HTML elements 

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

JQuery 

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



ANSWER

Change the style to:

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

  • This need user interaction, meaning you cannot trigger it without user clicking somewhere in document:

    DEMO

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