Geek Answers Handbook

OnChange does not work when entering a color type

I search a lot and find the answer to stackoverflow, but all in vain nothing works for me. I want to get the color value when the color changes in the input field. Here is my code, please check this why it is not working.

  <input type="color" id="bgcolor" value="#ffffff" onchange="test()" />

Here is the javascript code.

  function test(){ console.log('working.....'); }

This function does not work if you replace onChange with onclick , it works fine, but why not use onChange .

Thanks.

+6
source share
6 answers

I get the same behavior with both Chrome and Firefox on Windows, and this only happens with pure black, pure white, any color very close to one of them.

If you look at the color picker, you will notice that the rgb values ​​do not change when you move the cursor on the main square (they do if you use the vertical slider on the right, but that’s not what the average user will tend to do).

enter image description here

The same thing happens with other applications that use the same color set, for example, MSpaint or Tkinter tkColorChooser.askcolor() . I assume that this is the default color choice for the default window, since the "color" has British English "color", which is my default language choice.

To fix this, simply use any color that is not #ffffff or #000000 (or closes) as the starting 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);" />
+2
source

Access this value.

 function test(t) { console.log(t.value); } 
 <input type="color" id="bgcolor" value="#ffffff" onchange="test(this)" onkeyup="test(this)" />
+5
source

its work for me check it out below

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

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" />
+2
source

Try to execute a code snippet using 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)" />
+2
source

I think this problem only occurs on some platforms. You should have indicated which platform you are working on to avoid confusion. That is why most people could not reproduce your problem.

Did you run the browser on Mac OS X? In this case, use "input" instead of "change", for example:

 $('#bgcolor').on('input', function() { console.log($(this).val()); } );

In fact, I think that “input” is the right event for color inputs, not “change”, so you can use “input” for all platforms.

0
source

More articles:


All Articles