javascript - html5 颜色输入元素的事件处理程序

Question

在 Chrome 中使用新的 input="color" 元素会触发一个新的弹出对话框：

我想知道是否有一个事件处理程序会在此预览窗口中的值更改后立即触发，而不仅仅是在单击“确定”之后

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

见http://jsfiddle.net/Riesling/PEGS4/

Answer 1

您正在寻找的是inputevent。

您修改后的小提琴现在应该可以在所有（体面的）浏览器中使用：

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

Answer 2

你真的想要每个 HTML 规范的输入事件。没有什么能保证在输入元素失去焦点之前触发更改事件。

“只要用户修改了控件的数据，就会触发输入事件。当值提交时，如果这对控件有意义，或者当控件失去焦点时，就会触发更改事件。”

Answer 3

要获取颜色输入的值，应该使用w3schoolonchange中提供的 event 属性

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

并定义一个处理事件的函数

 function getColorVal(colorValue){

     alert(colorValue);
}