I have got that:

<span class="opener">Open</span>
<input type="color" class="btn-invisible" />

and I would like to open the colorpicker of that field using JS. I have tried:

document.querySelector('span.opener')
  .addEventListener('click', 
    e => document.querySelector('.btn-invisible').focus()
  );

But that doesn't open the color picker. If that can be done by JS, how?

I have got that:

<span class="opener">Open</span>
<input type="color" class="btn-invisible" />

and I would like to open the colorpicker of that field using JS. I have tried:

document.querySelector('span.opener')
  .addEventListener('click', 
    e => document.querySelector('.btn-invisible').focus()
  );

But that doesn't open the color picker. If that can be done by JS, how?

• javascript
• input

• 3 Why .focus() instead of .click()? – Sebastian Simon Commented Apr 24, 2017 at 14:06
• 1 Possible duplicate of Open browser-standard colorpicker with javascript without type=color – Yury Tarabanko Commented Apr 24, 2017 at 14:08

3 Answers 3

There's no need for javascript, just wrap a label around the input:

<label>
  Open
  <input type="color" style="display:none">
</label>

The color input control requires a click (like a button).

document.querySelector('span.opener')
  .addEventListener('click', 
    e => document.querySelector('.btn-invisible').click()
  );

.btn-invisible {
   display: none;
}

<span class="opener">Open</span>
<input type="color" class="btn-invisible" />

Add an Id to the color input (you can keep it hidden if you want) then fire a click event with javascript. Click outside the color picker to get the color value.

function show_colorpicker(){
document.getElementById('pick_color').click();
}
function show_color(){ alert(document.getElementById('pick_color').value)
}

<input onchange="show_color();" type="color" id="pick_color" name="pick_color" style="display:none" />

<a onclick="show_colorpicker();">Click me!</a>