如何在浏览器中获得相同的<input type =“color”/>值更改功能？

Question

我正在开发一个网页应用，当用户从<input type="color">中选择颜色时，该应用会使用javascript在网页上执行某些操作。

问题是<input type="color">在Chrome，Firefox和Safari上的行为有所不同：

• 在Safari上，当用户点击<input type="color">时，不会弹出外部颜色选择器窗口
• 在Firefox上，弹出一个外部颜色选择器控件窗口，但{1}元素的值仅在1）发生值更改时更改，2）当颜色选择器窗口随后关闭时（在Mac上编辑 ...;在Windows上，用户必须单击“确定”按钮确认值更改，而不仅仅是关闭窗口）

Chrome的行为非常理想：

• 点击后，input会提供一个颜色选择框弹出窗口
• 每次在颜色选择框弹出窗口中更改值时，<input type="color">元素的值会更改（ 颜色选择器窗口关闭之前）

Here is a codepen with a vanilla <input type="color">在所有3个浏览器上检查时都会显示此问题。

如何使用javascript和/或css从Firefox和Safari中获取input Chrome行为？

修改 关于Safari的一个疯狂的事情是，their docs say <input type="color">输入类型是：

  

用于指定RGB颜色值的输入控件。用户可以从颜色井中选择颜色

Answer 1

我担心我们还没有在开发中使用这种输入类型。您最好的解决方案是使用跨浏览器插件。

您可以在http://caniuse.com/#search=color

看到色彩元素的支持