Обработчик событий для элемента ввода цвета html5

Использование нового элемента input = "color" в Chrome запускает новый всплывающий диалог:

Я хотел бы знать, есть ли обработчик событий, который срабатывает, как только изменяется значение в этом окне предварительного просмотра, а не только после нажатия "ОК"

jQuery('#colorinput').on('change', function() { // fires only after clicking OK
    jQuery('#main').css('background-color', jQuery(this).val()); 
 });

См. http://jsfiddle.net/Riesling/PEGS4/

Ответы

Ответ 1

Что вы ищете, это input событие.

Ваша измененная скрипка теперь должна работать во всех (приличных) браузерах:

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

Ответ 2

Вам действительно нужно вводить событие для спецификации HTML. Ничто не гарантирует, что событие изменения должно срабатывать до того, как элемент ввода потерял фокус.

"Событие ввода срабатывает всякий раз, когда пользователь модифицировал данные элемента управления. Событие изменения срабатывает, когда значение зафиксировано, если это имеет смысл для элемента управления, или когда управление теряет фокус."

Ответ 3

Чтобы получить значение цветового ввода, вы должны использовать атрибут события onchange, указанный в w3school

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

и определите функцию, обрабатывающую событие

 function getColorVal(colorValue){

     alert(colorValue);
}