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

Posted 2023-02-16

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

【英文标题】：Open browser-standard colorpicker with javascript without type=color

【发布时间】：2015-06-22 22:28:15

【问题描述】：

有谁知道打开浏览器标准颜色选择器的唯一方法，而不使用 html 字段？所以我想要一个javascript，点击html输入颜色字段的效果完全相同。 巴特

【问题讨论】：

你说的这个浏览器标准的颜色选择器是什么？

颜色选择器内置在浏览器中，无法通过程序触发，因此在没有输入的情况下也可能无法触发。

用display: none隐藏你的元素，然后用javascript点击它。

你想触发什么。我相信现代浏览器要求您点击某些东西才能触发它打开。

【参考方案1】：

这是一个很好的老式“hover-hack”解决方案，即使在 MS Edge 中也可以使用：

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

然后将onchange 绑定到 colro 元素

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

【参考方案2】：

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

【讨论】：

谢谢，但事实上，我想使用它的目的是通过单击 chrome 中的书签来启动颜色选择器。此时，我还在书签中添加了一个 javascript，以在页面上启动一个带有尺寸的 div。就像我想添加一个“显示颜色选择器”书签一样，这样我就不能使用隐藏在任何地方的输入字段。

实际创建一个扩展可能会更好。

这适用于 chrome/firefox/IE11/safari 除了边缘

Safari 上的事情是你必须先 focus() 它。简单的点击不会打开它。