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