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 中得到相同的行为，它只发生在纯黑色、纯白色或非常接近其中任何一种颜色的任何颜色上。

如果您查看颜色选择器，您会注意到当您在主方块中移动光标时 rgb 值不会改变（如果您使用向右的垂直滑块，它们会改变，但这不是一般用户会倾向于的）去做）。

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

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

Answer 4

希望这对你有帮助。

<!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" />

Answer 5

它对我有用，请在下面查看

 function hello() { alert("hi"); }

 <input type="color" value="#ff0000" onchange="hello();">

Answer 6

尝试使用 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)" />

Answer 7

"Instead of onchange on input type color use the input event in JavaScript.
Here is the working code."

<input type="color" id="colorPicker" value="#333" style="width:100%;height:210px;      border:none;background:none">

<script>
       colorpicker = document.getElementById('colorPicker');
       colorpicker.addEventListener('input', ()=>{
            console.log('my color is: ',colorpicker.value);
       });
        
</script>

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

问题描述

7 个解决方案

解决方案1
24 已采纳 2017-11-24 10:40:52

解决方案2
10 2017-03-30 16:33:08

解决方案3
4 2016-09-01 07:07:27

解决方案4
3 2016-09-01 07:10:59

解决方案5
1 2016-09-01 07:08:55

解决方案6
1 2016-09-01 07:11:35

解决方案7
0 2022-01-06 06:34:51

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

问题描述

7 个解决方案

解决方案1 24 已采纳 2017-11-24 10:40:52

解决方案2 10 2017-03-30 16:33:08

解决方案3 4 2016-09-01 07:07:27

解决方案4 3 2016-09-01 07:10:59

解决方案5 1 2016-09-01 07:08:55

解决方案6 1 2016-09-01 07:11:35

解决方案7 0 2022-01-06 06:34:51

解决方案1
24 已采纳 2017-11-24 10:40:52

解决方案2
10 2017-03-30 16:33:08

解决方案3
4 2016-09-01 07:07:27

解决方案4
3 2016-09-01 07:10:59

解决方案5
1 2016-09-01 07:08:55

解决方案6
1 2016-09-01 07:11:35

解决方案7
0 2022-01-06 06:34:51