Event handler for a html5 color input element

Question

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/

Marc-André Lafortune · Accepted Answer · 2014-09-03T17:40:57.207

17

What you are looking for is the input event.

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

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

edited Sep 03 '14 at 17:40

answered Sep 03 '14 at 17:20

Marc-André Lafortune

78,216
16
166
166

1

Sadly, Google Chrome seems to no longer support this event as of the date of this comment. – Aaron Cicali Nov 24 '15 at 21:58
1

@acicali: I believe you are mistaken. My fiddle still works on latest release too – Marc-André Lafortune Nov 25 '15 at 01:07
Sorry, I misunderstood the fiddle. The input event seems to simply mirror the change event in this case, I was expecting different behavior. – Aaron Cicali Nov 25 '15 at 22:17
Chrome fires a `change` event when it shouldn't. The difference will be noticeable in Firefox, which treats the events correctly. See https://bugzilla.mozilla.org/show_bug.cgi?id=1062403 – Marc-André Lafortune Nov 26 '15 at 06:26
@jave.web the fiddle I provided works for me on Chrome 49.0.2623.110 (64-bit) – Marc-André Lafortune Apr 01 '16 at 17:36
1

@Marc-AndréLafortune it works AFTER clicking on OK .... not while selecting color WHILE colorpicker is opened :) – jave.web Apr 01 '16 at 19:12
Which OS? You should report a bug. On OS X it works fine. – Marc-André Lafortune Apr 02 '16 at 13:10
@Marc-AndréLafortune I would think Windows. I have the latest version of Chrome and the input event doesn't fire until I click ok. Exact OS: Windows 10. – Expenzor Sep 24 '16 at 04:54
it works, thank you !! ... just in case you want to use it with vanilla Javascript you may try something like `document.querySelector('#colorinput').addEventListener('input', (e) => ...)` ... it works like a charm !! ;) :) – Carlos Saltos Sep 13 '20 at 07:36

score 1 · Answer 2 · answered Sep 03 '14 at 17:34

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

score -2 · Answer 3 · answered Jan 17 '13 at 11:07

-2

To get the value of color input, you should use the event attribute onchangeprovided in w3school

<input name="eventColor" type="color" onchange="getColorVal(eventColor.value)"/>

and define a function that handle the event

 function getColorVal(colorValue){

     alert(colorValue);
}

answered Jan 17 '13 at 11:07

palAlaa

9,500
33
107
166

How about instead doing a $('#idname').change(); event? – shubniggurath Oct 28 '13 at 18:07
1

This didn't answer the question in this post, onchange is triggering only after ok button click – Naga Jul 25 '14 at 09:37
Inline Javascript should be avoided (see [this SO answer](http://stackoverflow.com/a/21975639/379160)). – thirdender Feb 18 '15 at 01:37

Event handler for a html5 color input element

3 Answers3

Linked