onChange event is not working in color type input

Issue

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?

Solution

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

Answered By - user2314737