我正在尝试在 MacOS 上的 Safari 中使用浏览器原生 HTML color input。如果用户尝试从颜色选择器中的以下视图中选择颜色，我会遇到change event 经常触发的问题。
当用户完成选择或分别关闭颜色选择器时，我只需要颜色。
根据 Mozilla 文档：
change事件在用户关闭颜色选择器时触发。
仅在用户关闭选择器时触发。
这是 MacOS 上 Safari 中的错误吗？
如何获得最后选择的颜色？
【问题讨论】：
标签： html input safari mobile-safari onchange
当用户完成选择或分别关闭颜色选择器时，我只需要颜色。
如果用户尝试从颜色选择器的以下视图中选择颜色，我会经常触发 change 事件。
我做的第一件事是在 Firefox、Chrome 和 Safari 中进行测试，看看它们有何不同。我发布了三个测试视频here。只有在 Firefox 中，它的行为才符合预期。 （旁注：它在 Android Chrome 上按预期工作。）
此外，我发现它在使用 Chrome 和 Firefox 的 Windows 中表现得如预期。因此，操作系统和浏览器类型似乎存在差异。
现在，根据官方 HTML 标准，change 是……
当用户提交值更改时在控件上触发（另请参见输入事件）
我在我的研究中没有发现更多，但我提出了以下原因来说明为什么会发生这种情况。在 macOS 上，无法像在 Windows 上那样确认您选择的颜色，例如“确定”或“选择”按钮。当用户在 macOS 上关闭颜色选择器时，唯一的方法是单击“X”。现在，浏览器/网站应该如何知道用户在关闭该窗口之前选择的颜色是否是用户想要的，或者他们是否因为那不是他们想要的颜色而关闭它？因此，Chrome 和 Safari 等浏览器总是在搜索用户选择的颜色，并不断更新。然而，像 Firefox 这样的浏览器采用不同的方法，并在用户关闭颜色选择器时进行简单搜索，然后使用该值。
总之，浏览器可能以不同的方式解释标准。每当用户将鼠标移到新颜色上时，这可能被视为根据change 事件的标准“提交值更改”。
有一个问题与您的here 非常相似。如您所见，每个人似乎都有不同的结果，根据他们使用的浏览器/操作系统重新创建问题。
我能想到的最佳解决方案是结合本线程中的讨论和查看文档。通过在input 标签中使用onblur 属性，可以在用户不再选择输入框时调用函数。也许你可以放一个“提交”按钮来引导他们点击输入框。调用此函数时，获取input 表单中的值，您可以根据需要进行操作，例如将其打印到控制台。
这是我测试一个小jsfiddle的例子：https://imgur.com/a/4k0zJC4
请注意，在我选择一种颜色后，我关闭了选择器，然后单击屏幕上某处的空白区域以取消选择 input 字段。然后，我选择的值被打印到控制台。
另一种解决方案是使用定制的颜色选择器，例如 jscolor 或 spectrum。 （有一个问题类似于你在频谱here 中描述的问题，但似乎他们已修复它。）
【讨论】：
跨浏览器事件差异是一个常见问题。我的建议如下：
尝试使用oninput 属性在最终确认输入时触发函数。
例如
<input type="color" value="#ff0000" id="bgcolor" name="bgcolor" oninput="changeBackground(bgcolor.value)">
触发的函数如下：
function changeBackground(colorValue){
document.body.style.backgroundColor = colorValue;
}
如果不是背景色，请将样式更改为您要更改的样式。
【讨论】：
onchange 事件的问题。所以它不能解决我的问题。