Safari上的HTML颜色输入更改事件经常触发

Question

bounty到期在4天内。这个问题的答案有资格获得+ 50声望赏金。BuZZ-dEE想要引起更多关注来回答这个问题。

我正在尝试在MacOS的Safari中使用本机浏览器HTML color input。我有一个问题，如果用户尝试从颜色选择器中的以下视图中选择一种颜色，color通常会触发。

input

[仅当用户完成选择或关闭颜色选择器时才需要颜色。

根据Mozilla文档：

当用户关闭颜色选择器时会触发change event事件。

仅在用户关闭选择器时才触发。

这是MacOS上Safari中的错误吗？

如何获得最后选择的颜色？

Answer 1

问题

[仅当用户完成选择或关闭颜色选择器时才需要颜色。

我有一个问题，如果用户尝试从颜色选择器中的以下视图中选择颜色，则更改事件通常触发。

研究

我做的第一件事就是在Firefox，Chrome和Safari中对此进行测试，以了解它们之间的差异。我发布了测试的三个视频change。仅在Firefox中，它的行为符合预期。 （旁注：它可以在Android Chrome上正常工作。）

此外，我发现在使用Chrome和Firefox的Windows中，它的行为符合预期。因此，操作系统和浏览器类型似乎都存在差异。

现在，根据官方HTML标准，为...

当用户提交值更改时在控件处触发（另请参见输入事件）

我在研究中没有发现更多东西，但是我提出了以下原因。在macOS上，没有任何地方可以像Windows上那样确认您选择的颜色，例如“确定”或“选择”按钮。当用户在macOS上关闭颜色选择器时，唯一的方法是单击“ X”。现在，浏览器/网站应该如何得知用户在关闭该窗口之前选择的颜色是否是用户想要的颜色，还是因为不是该颜色而关闭了该窗口？因此，Chrome和Safari等浏览器始终在搜索用户选择的颜色，并不断对其进行更新。但是，像Firefox这样的浏览器采用了不同的方法，并在用户关闭颜色选择器然后使用该值时进行简单搜索。

总之，浏览器可能以不同的方式解释标准。每当用户将鼠标移到新颜色上时，这都可能是change事件的标准所指的“提交值更改”。

可能的解决方案

[有一个问题与您的here非常相似的话题。如您所见，根据使用的浏览器/操作系统来重新创建问题，每个人似乎都有不同的结果。

我能想到的最佳解决方案是基于该线程中的讨论以及查看文档的组合。通过使用change标记中的change属性，可以在用户不再选择输入框时调用一个函数。也许您可以使用“提交”按钮来引导他们单击输入框。调用此函数时，以here格式获取值，然后就可以对其进行处理，例如将其打印到控制台。

这是我测试我制作的小onblur的示例：input

[注意，选择颜色后如何关闭选择器，然后单击屏幕上空白处以取消选择input字段。然后，我选择的值将打印到控制台。

另一个解决方案是使用定制的颜色选择器，例如jsfiddle或https://imgur.com/a/4k0zJC4。 （存在一个与您对频谱input所描述的问题类似的问题，但似乎他们已将其修复。）

---

我可能完全错了，但这是我根据在所有情况下都有效的研究得出的结论。有人让我知道是否有更简单的方法。