Event handler for a html5 color input element

Question

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/

Solution 1

What you are looking for is the input event.

Your modified fiddle should now work in all (decent) browsers:

$('#colorinput').on('input', function() { ... } )

Solution 2

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