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

时间:2012-12-10 17:03:48

标签: html5 google-chrome javascript-events

在Chrome中使用new input =“color”元素会触发一个新的弹出式对话框:

screenshot color dialog

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

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

请参阅http://jsfiddle.net/Riesling/PEGS4/

3 个答案:

答案 0 :(得分:14)

您要找的是input event

您的modified fiddle现在应该适用于所有(体面的)浏览器:

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

答案 1 :(得分:1)

你真的想要每个HTML规范的输入事件。 在输入元素失去焦点之前,没有任何东西可以保证更改事件。

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

答案 2 :(得分:-1)

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

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

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

 function getColorVal(colorValue){

     alert(colorValue);
}