'onChange event is not working in color type input

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?

javascriptjqueryhtmlcss


Solution 1:[1]

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).

enter image description here

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);" />

Solution 2:[2]

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());
    }
);

Solution 3:[3]

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

Solution 4:[4]

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

Solution 5:[5]

its working for me, check it below

function hello()
{
 alert("hi");
}
<input type="color" value="#ff0000" onchange="hello();">

Solution 6:[6]

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

Solution 7:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user2314737
Solution 2 Anye
Solution 3
Solution 4
Solution 5 Bharat Patel
Solution 6 Mohit Tanwani
Solution 7 Sarfraz Rasheed

Related Questions