如何跨浏览器获得相同的 <input type="color"> 值更改功能？答案

【问题标题】：How to get the same <input type="color"> value change functionality across browsers?如何跨浏览器获得相同的 <input type="color"> 值更改功能？
【发布时间】：2017-07-08 08:32:07
【问题描述】：

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

问题在于 <input type="color"> 在 Chrome、Firefox 和 Safari 上的行为不同：

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

Chrome 的行为是理想的：

点击时，<input type="color"> 会提供一个颜色选择器弹出窗口
每当颜色选择器弹出窗口内的值发生变化时，input 元素的值都会发生变化（在颜色选择器窗口关闭之前）

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

如何使用 javascript 和/或 css 从 Firefox 和 Safari 中获取 <input type="color"> Chrome 行为？

编辑 Safari 的疯狂之处在于，their docs say color 输入类型是：

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

【问题讨论】：

您必须创建自己的替换颜色选择器，或使用预制插件。有很多插件可以做到这一点。

标签： javascript css input colors cross-browser

【解决方案1】：

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

你可以在http://caniuse.com/#search=color看到对颜色元素的支持

【讨论】：