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

Question

我正在尝试在 MacOS 上的 Safari 中使用浏览器本机HTML 。color input我遇到的问题是，如果用户尝试从颜色选择器中的以下视图中选择颜色，则该change事件经常触发。

当用户完成选择或分别关闭颜色选择器时，我只需要颜色。

根据 Mozilla 文档：

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

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

这是 MacOS 上 Safari 的错误吗？

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

Answer 1

问题

当用户完成选择或分别关闭颜色选择器时，我只需要颜色。

我遇到的问题是，如果用户尝试从颜色选择器中的以下视图中选择颜色，则更改事件经常触发。

研究

我做的第一件事是在 Firefox、Chrome 和 Safari 中对此进行测试，看看它们有何不同。我在这里发布了三个测试视频。只有在 Firefox 中它的表现才符合预期。（旁注：它在 Android Chrome 上按预期工作。）

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

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

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

我在研究中没有发现更多信息，但我提出了以下原因来解释为什么会发生这种情况。在 macOS 上，没有任何地方可以像 Windows 上那样确认您选择的颜色，例如“确定”或“选择”按钮。当用户在 macOS 上关闭颜色选择器时，唯一的方法是单击“X”。现在，浏览器/网站应该如何知道用户在关闭该窗口之前选择的颜色是否是用户想要的颜色，或者他们是否因为这不是他们想要的颜色而关闭了它？因此，像 Chrome 和 Safari 这样的浏览器总是在搜索用户选择的颜色，并不断更新它。然而，像 Firefox 这样的浏览器采用不同的方法，简单地搜索用户何时关闭颜色选择器，然后使用该值。

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

可能的解决方案

这里有一个帖子的问题与您的问题非常相似。正如您所看到的，每个人似乎都会根据他们使用的浏览器/操作系统来重现问题，得到不同的结果。

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

这是我测试我制作的小型jsfiddle的示例：https ://i.stack.imgur.com/QrQIy.jpg

请注意，在选择颜色后，我关闭选择器，然后单击屏幕上某处的空白区域以取消选择该input字段。然后，我选择的值被打印到控制台。

另一种解决方案是使用定制的颜色选择器，例如jscolor或Spectrum。（存在与您在此处描述的频谱类似的问题，但似乎他们已修复它。）

我可能完全错误，但这是我根据适用于所有情况的研究得出的结论。有人让我知道是否有更简单的方法。