使用不带 type=color 的 javascript 打开浏览器标准颜色选择器

Question

有谁知道在不使用 html 字段的情况下打开浏览器标准颜色选择器的唯一 javascript 方法？所以我想要一个 javascript，它的作用与单击 html 输入颜色字段完全相同。巴特

Answer 1

您将必须使用输入字段，您可以将其隐藏在页面之外。这里的问题是，颜色对话框需要在浏览器中单击才能打开颜色对话框。如果只是调用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!">

Answer 2

这是一个很好的旧式“悬停黑客”解决方案，即使在 MS Edge 中也能工作：

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

然后将

onchange

绑定到 colro 元素

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

Answer 3

 // 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>

// https://jsuites.net/docs/color-picker

使用不带 type=color 的 javascript 打开浏览器标准颜色选择器

问题描述投票：0回答：3

3个回答

最新问题

使用不带 type=color 的 javascript 打开浏览器标准颜色选择器

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3