Using the new input="color" element within Chrome triggers a new popup dialog:
I would like to know if there is an event handler that fires as soon as the value in this preview window changes and not only after clicking on "OK"
jQuery('#colorinput').on('change', function() { // fires only after clicking OK
jQuery('#main').css('background-color', jQuery(this).val());
});
See http://jsfiddle.net/Riesling/PEGS4/
You can't make it only display hex, but whatever mode the user chooses the value is stored as hex.
Input type: numbermax - specifies the maximum value allowed. min - specifies the minimum value allowed. step - specifies the legal number intervals. value - Specifies the default value.
What you are looking for is the input
event.
Your modified fiddle should now work in all (decent) browsers:
$('#colorinput').on('input', function() { ... } )
You really want input event per HTML spec. Nothing guarantees change event to fire before the input element has lost focus.
"The input event fires whenever the user has modified the data of the control. The change event fires when the value is committed, if that makes sense for the control, or else when the control loses focus. "
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