onChange event is not working in color type input
Question
I search a lot and find answers on Stack Overflow but all in vain, nothing is working for me. I want to get the color value when color is changed in input field.
Here is my code, please check this why it's not working.
<input type="color" id="bgcolor" value="#ffffff" onchange="test()" />
Here is the JavaScript code:
function test(){
console.log('working.....');
}
This function is not working, if you replace onChange with onclick it's working fine, but why not for onChange ?
7 answers
solution1
24 ACCPTED 2017-11-24 10:40:52
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.
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).
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.
To fix this, just use any color that's not #ffffff or #000000 (or close) as your start color.
<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);" />
solution2
10 2017-03-30 16:33:08
This problem some people are having with inconsistent behaviour in different browsers happens because you're using the "onchange" event ("change" in jQuery), which is not the appropriate event for color inputs (that's why it sometimes works and it sometimes doesn't, especially on Mac OS X).
You should use "oninput" (or "input" when using jQuery), which works fine in all browsers and platforms.
$('#bgcolor').on('input',
function() {
console.log($(this).val());
}
);
solution3
4 2016-09-01 07:07:27
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)" />
solution4
3 2016-09-01 07:10:59
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" />
solution5
1 2016-09-01 07:08:55
its working for me, check it below
function hello() { alert("hi"); }
<input type="color" value="#ff0000" onchange="hello();">
solution6
1 2016-09-01 07:11:35
Try following snippet with JavaScript and 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)" />
solution7
0 2022-01-06 06:34:51
"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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.