Open browser-standard colorpicker with javascript without type=color

Question

Does anyone knows a javascript only way to open the browser-standard colorpicker, without using a html field? so i want a javascript what does exactly the same a a click on the html input color field. Bart

Answer 1

You are going to have to use the input field, you can just hide it off the page. Issue here is the fact that the color dialog requires a click in browsers in order to open up the color dialog. It will not work if you just call click()

document.getElementById("xxx").addEventListener("click", function() {
  document.getElementById("c").focus();
  document.getElementById("c").value = "#FFCC00";
  document.getElementById("c").click();
});

.hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

<input type="color" id="c" tabindex=-1 class="hidden">
<input type="button" id="xxx" value="Click Me!">