Menu
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?
371
The onchange event is not working in Input type color (input [type="color"]). So we'll use input event instead of onchange to apply the changes. First, we will fetch the Input element by ID. Next, we will trigger the event. The in-built input type color will populate a popup like another browser window/iframe.
The in-built input type color will populate a popup like another browser window/iframe. When we change the color it will not reflect immidiatly using the onchange event listner.
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).
The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed.
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);" />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());
}
);
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" />If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
