javascript - 自动完成时触发的任何事件？

Question

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

唯一的问题是，如果您从浏览器的自动完成框中选择一个输入，它不会更新。当您从自动完成中选择时是否有任何事件触发(显然既不是change 也不是click)。请注意，如果您从自动完成框中选择并模糊输入字段，则会触发更新。我希望它在自动完成后立即被触发。

参见:http://jsfiddle.net/pYKKp/ (希望你过去用名为“email”的输入填写了很多表格)。

HTML:

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

CSS:

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 中 javascript 控制台提供的功能。和 firebug打印出元素生成的所有事件。这是您将如何使用它的示例:

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

在您的情况下，Firefox 和 Opera 都会生成一个 input当用户从自动完成下拉列表中选择一个项目时的事件。在 IE7-8 中 change事件在用户改变焦点后产生。最新的 Chrome 确实会生成类似的事件。

可在此处找到详细的浏览器兼容性图表:
https://developer.mozilla.org/en-US/docs/Web/Events/input