自动完成时有触发事件吗？

Question

我有一个很简单的表格。当用户在输入字段中键入时，我想更新他们在页面上其他地方键入的内容。一切正常。我已将更新绑定到keyup、change和click事件。

唯一的问题是，如果您从浏览器的自动完成框中选择一个输入，它不会更新。当您从“自动完成”中选择时，是否会触发任何事件（显然既不是更改也不是单击)。注意，如果您从“自动完成”框中选择“模糊输入”字段，将触发更新。我希望它能在自动完成时被触发。

请参见：http://jsfidle.net/pykkp/（希望您过去用名为“email”的输入填写过很多表单）。

<input name="email" /> 
<div id="whatever">&lt;whatever></div> 

div { 
    float: right; 
} 

$("input").on('keyup change click', function () { 
   var v = $(this).val(); 
    if (v) { 
     $("#whatever").text(v);   
    }  
    else { 
        $("#whatever").text('<whatever>'); 
    } 
}); 

Answer 1

我建议使用monitorevents。它是web inspector和firebug中javascript控制台提供的一个函数，它打印出元素生成的所有事件。下面是如何使用它的示例：

monitorEvents($("input")[0]);

在您的示例中，当用户从autocomplete下拉菜单中选择一个项目时，Firefox和Opera都会生成input事件。在IE7-8中，change事件是在用户更改焦点之后产生的。最新的Chrome确实产生了类似的事件。

详细的浏览器兼容性图表可在此找到:
https://developer.mozilla.org/en-us/docs/web/events/input