Javascript onChange 事件在颜色类型输入中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39264722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onChange event is not working in color type input
提问by Azeem Haider
I search a lot and find answer on stackoverflow but all in vain nothing is working for me. I want to get the color value when color is changed in inputfield.
Here is my code please check this why its not working.
我搜索了很多并在 stackoverflow 上找到了答案，但徒劳无功。我想在input字段中更改颜色时获取颜色值。这是我的代码，请检查为什么它不起作用。
<input type="color" id="bgcolor" value="#ffffff" onchange="test()" />
Here is javascript code.
这是javascript代码。
function test(){
console.log('working.....');
}
This function is not working, if you replace onChangewith onclickit's working fine but why not for onChange.
这个功能不起作用，如果你onChange用onclick它代替它工作正常但为什么不为onChange.
Thanks.
谢谢。
回答by user2314737
I get the same behavior both with Chrome and Firefox on Windows and it only occurs with pure black, pure white, o any color very close to either one of them.
我在 Windows 上的 Chrome 和 Firefox 中得到相同的行为，它只发生在纯黑色、纯白色或非常接近其中任何一种颜色的任何颜色上。
If you look at the Color picker you'll notice that the rgb values don't change when you move the cursor in the main square (they do if you use the vertical slider to the right, but that's not what the average user would tend to do).
如果您查看颜色选择器，您会注意到当您在主方块中移动光标时 rgb 值不会改变（如果您使用向右的垂直滑块，它们会改变，但这不是一般用户会倾向于的）去做）。
The same behavior occurs with other applications using the same color picker, for instance MSpaint or Tkinter's tkColorChooser.askcolor(). I assume this is Window's default color picker since "color" has the British English spelling "colour", that's my default language choice.
使用相同颜色选择器的其他应用程序也会发生相同的行为，例如 MSpaint 或 Tkinter 的tkColorChooser.askcolor(). 我认为这是 Window 的默认颜色选择器，因为“颜色”有英式英语拼写“颜色”，这是我的默认语言选择。
To fix this, just use any color that's not #ffffffor #000000(or close) as your start 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);" />回答by Pugazh
Access the value like this.
像这样访问值。
function test(t) {
console.log(t.value);
}<input type="color" id="bgcolor" value="#ffffff" onchange="test(this)" onkeyup="test(this)" />回答by Punit Gajjar
Hope this helps you .
希望这对你有帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="color" id="bgcolor" value="#ffffff" />
</body>
<script>
$(document).on("change" , "#bgcolor" , function(){
alert($(this).val());
});
</script>
</html>
$(document).on("change" , "#bgcolor" , function(){
alert($(this).val());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="color" id="bgcolor" value="#ffffff" />回答by Mohit Tanwani
Try following snippet with JavaScript and JQuery.
尝试使用 JavaScript 和 JQuery 执行以下代码段。
//Javascript function
function test(t) {
console.log(t.value);
}
//Jquery function
$('#bgcolor').change(function(){
console.log($(this).val());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="color" id="bgcolor" value="#ffffff" onchange="test(this)" />回答by Bharat Patel
its working for me, check it below
它对我有用，请在下面查看
function hello()
{
alert("hi");
}<input type="color" value="#ff0000" onchange="hello();">回答by OMA
I think this problem only happens on some platforms. You should have specified what platform you are running on to avoid confusions. That's why most people couldn't reproduce your problem.
我认为这个问题只发生在某些平台上。您应该指定正在运行的平台以避免混淆。这就是为什么大多数人无法重现您的问题。
Did you happen to be running your browser on Mac OS X? In that case, use "input" instead of "change", like this:
您是否碰巧在 Mac OS X 上运行浏览器？在这种情况下，请使用“输入”而不是“更改”，如下所示：
$('#bgcolor').on('input',
function()
{
console.log($(this).val());
}
);
Actually I think "input" is the correct event for color inputs, not "change", so you could use "input" for all platforms anyway.
实际上，我认为“输入”是颜色输入的正确事件，而不是“更改”，因此无论如何您都可以对所有平台使用“输入”。
