Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Event handler for a html5 color input element

Using the new input="color" element within Chrome triggers a new popup dialog:

screenshot color 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/

like image 515
Riesling Avatar asked Dec 10 '12 17:12

Riesling


People also ask

Can I make the HTML color input only display hex?

You can't make it only display hex, but whatever mode the user chooses the value is stored as hex.

Which of the following are values of type attribute of input in HTML5?

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.


2 Answers

What you are looking for is the input event.

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

$('#colorinput').on('input', function() { ... } )
like image 82
Marc-André Lafortune Avatar answered Sep 27 '22 23:09

Marc-André Lafortune


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

like image 24
anon Avatar answered Sep 27 '22 23:09

anon