Использование нового элемента input = "color" в Chrome запускает новый всплывающий диалог:
Я хотел бы знать, есть ли обработчик событий, который срабатывает, как только изменяется значение в этом окне предварительного просмотра, а не только после нажатия "ОК"
jQuery('#colorinput').on('change', function() { // fires only after clicking OK
jQuery('#main').css('background-color', jQuery(this).val());
});
Что вы ищете, это input событие.
Ваша измененная скрипка теперь должна работать во всех (приличных) браузерах:
$('#colorinput').on('input', function() { ... } )
Вам действительно нужно вводить событие для спецификации HTML. Ничто не гарантирует, что событие изменения должно срабатывать до того, как элемент ввода потерял фокус.
"Событие ввода срабатывает всякий раз, когда пользователь модифицировал данные элемента управления. Событие изменения срабатывает, когда значение зафиксировано, если это имеет смысл для элемента управления, или когда управление теряет фокус."
Чтобы получить значение цветового ввода, вы должны использовать атрибут события onchange, указанный в w3school
<input name="eventColor" type="color" onchange="getColorVal(eventColor.value)"/>
и определите функцию, обрабатывающую событие
function getColorVal(colorValue){
alert(colorValue);
}