html5 颜色输入元素的事件处理程序答案

【问题标题】：Event handler for a html5 color input elementhtml5 颜色输入元素的事件处理程序
【发布时间】：2012-12-10 17:03:48
【问题描述】：

在 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/

【问题讨论】：

标签： javascript html jquery dom-events

【解决方案1】：

您正在寻找的是input event。

您的modified fiddle 现在应该可以在所有（体面的）浏览器中使用：

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

【讨论】：

遗憾的是，截至发表此评论之日，Google Chrome 似乎不再支持此事件。
@acicali：我相信你错了。我的小提琴仍然适用于最新版本
对不起，我误解了小提琴。在这种情况下，输入事件似乎只是反映了更改事件，我期待不同的行为。
Chrome 在不应该的情况下触发 change 事件。在正确处理事件的 Firefox 中，差异会很明显。见bugzilla.mozilla.org/show_bug.cgi?id=1062403
@Marc-AndréLafortune 它在点击 OK 后起作用....而不是在打开颜色选择器时选择颜色 :)

【解决方案2】：

您确实需要每个 HTML 规范的输入事件。没有什么能保证在输入元素失去焦点之前触发 change 事件。

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

【讨论】：

【解决方案3】：

要获取颜色输入的值，应该使用w3school中提供的事件属性onchange

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

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

 function getColorVal(colorValue){

     alert(colorValue);
}

【讨论】：

不如做一个 $('#idname').change();活动？
这没有回答这篇文章中的问题，onchange 仅在单击确定按钮后触发
应避免使用内联Javascript（请参阅this SO answer）。