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

Solution 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!">

Solution 2

Here's a good old "hover-hack" solution that works even in MS Edge:

<input type="color" style='opacity:0;width:100px;position:absolute;'/>
<button>clickme</button>

then bind onchange to the colro element

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

Comments

[Bart Huisman]

thanks, but in fact, the thing where i want to use it for, is to launch the colorpicker by clicking a bookmark in chrome. At this moment i also added a javascript to a bookmark to launch a div on the page with dimensions in it. The same way i want to add a "show colorpicker" bookmark, this way i can't use a input field hidden anywhere.

[epascarello]

Might be better to actually create an extension.

[chitgoks]

this works in chrome/firefox/IE11/safari except edge

[Mark Langer]

The thing on Safari is that you must focus() it first. A simple click won't open it.