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

Question

我经常搜索并在stackoverflow上找到答案,但是一切都是徒劳无益的.我希望在input字段中更改颜色时获取颜色值.这是我的代码请检查这为什么它不起作用.

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

这是javascript代码.

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

此功能无法正常工作,如果更换onChange用onclick它工作正常,但为什么不为onChange.

谢谢.

Answer 1

我在Windows上使用Chrome和Firefox都会遇到相同的行为,它只会出现纯黑色,纯白色,任何颜色都非常接近其中任何一个.

如果您查看颜色选择器,您会注意到当您在主方块中移动光标时rgb值不会改变(如果您使用右侧的垂直滑块,它们会发生变化,但这不是普通用户所倾向的)去做).

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

要解决此问题,只需使用任何不是#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);" />

Answer 2

有些人在不同浏览器中遇到的行为不一致的问题是因为您使用了“onchange”事件（jQuery 中的“change”），这不是颜色输入的适当事件（这就是为什么它有时有效，有时无效） 't，尤其是在 Mac OS X 上）。

您应该使用“oninput”（或使用 jQuery 时的“input”），它适用于所有浏览器和平台。

$('#bgcolor').on('input',
    function() {
        console.log($(this).val());
    }
);

Answer 3

像这样访问这个值.

function test(t) {
  console.log(t.value);
}

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