CODEWITHSUNDEEP
javascripthtmlbrowsercolor-picker
Bart Huisman
Bart Huisman

Reputation: 125

Open browser-standard colorpicker with javascript without type=color

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

Upvotes: 9

Views: 20339

Answers (3)

Gessiel Silva
Gessiel Silva

Reputation: 1

 // I’ve been using this component for my projects://

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<script src="https://jsuites.net/v5/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<jsuites-color value="#009688"></jsuites-color>
<script>
document.querySelector('jsuites-color').addEventListener('onchange', function(e) {
    // Set the font color
    e.target.children[0].style.color = this.value;
    // Show on console
    console.log('New value:' + this.value);
});
</script>
</html>

enter image description here // https://jsuites.net/docs/color-picker

Upvotes: 0

Alex from Jitbit
Alex from Jitbit

Reputation: 60642

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/

Upvotes: 2

epascarello
epascarello

Reputation: 207511

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

Upvotes: 11

Related Questions