javascript - onChange 事件在颜色类型输入中不起作用

Question

我在 Stack Overflow 上进行了很多搜索并找到了答案，但都是徒劳的，没有任何东西对我有用。我想在 input 字段中更改颜色时获取颜色值。

这是我的代码，请检查为什么它不起作用。

 <input type="color" id="bgcolor" value="#ffffff" onchange="test()" />

这是 JavaScript 代码:

 function test(){
    console.log('working.....'); 
 }

此功能不起作用，如果将 onChange 替换为 onclick，它可以正常工作，但为什么不能用于 onChange？

Answer 1

我在 Windows 上使用 Chrome 和 Firefox 时都遇到了相同的行为，而且它只发生在纯黑色、纯白色或任何与它们中的任何一个非常接近的颜色上。

如果您查看颜色选择器，您会注意到当您将光标移动到主方 block 时 rgb 值不会改变(如果您使用右侧的垂直 slider ，它们会改变，但这不是平均值用户会倾向于这样做)。

使用相同颜色选择器的其他应用程序也会出现相同的行为，例如 MSpaint 或 Tkinter 的 tkColorChooser.askcolor()。我认为这是 Window 的默认颜色选择器，因为“color”的英式英语拼写为“colour”，这是我的默认语言选择。

要解决此问题，只需使用 #ffffff 或 #000000(或接近)以外的任何颜色作为起始颜色。

<label for="doesntWork1">doesn't work</label> <input type="color" id="doesntWork1" value="#ffffff" onchange="alert(this.value);" />
<p>
<label for="doesntWork2">doesn't work</label> <input type="color" id="doesntWork2" value="#000000" onchange="alert(this.value);" />
<p>
<label for="works1">works</label> <input type="color" id="works1" value="#fdffff" onchange="alert(this.value);" />
<p>
<label for="works2">works</label> <input type="color" id="works2" value="#000002" onchange="alert(this.value);" />