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

Question

我正在尝试使用浏览器原生 HTML color input 在 MacOS 上的 Safari 中。我的问题是 change event如果用户尝试从颜色选择器的以下 View 中选择颜色，则经常触发。



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

根据 Mozilla 文档:

The change event is fired when the user dismisses the color picker.

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

这是 MacOS 上 Safari 中的错误吗？

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

Answer 1

问题

I only need the color when the user is finished with his selection or respectively closes the color picker.

I have the problem that the change event fires to often if an user tries to pick a color from the following view in the color picker.

研究

我做的第一件事是在 Firefox、Chrome 和 Safari 中进行测试，看看它们有何不同。我发了三个测试视频 here .只有在 Firefox 中它的行为符合预期。 (旁注:它在 Android Chrome 上按预期工作。)

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

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

Fired at controls when the user commits a value change (see also the input event)

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

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

可能的解决方案

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

我可以提出的最佳解决方案是基于此线程中的讨论和查看文档的组合。通过使用 onblur input 中的属性标签，可以在用户不再选择输入框时调用函数。也许您可以放置​​一个“提交”按钮来引导他们点击输入框。当这个函数被调用时，取 input中的值表格，你可以用它做你想做的，比如把它打印到控制台。

这是我测试小型 jsfiddle 的示例我做了: https://imgur.com/a/4k0zJC4

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

另一种解决方案是使用定制的颜色选择器，如 jscolor或 spectrum . (有一个类似于您用频谱描述的问题 here ，但似乎他们修复了它。)

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