自动完成时触发的任何事件? [英] Any event triggered on autocomplete?

问题描述

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

I have a pretty simple form. When the user types in an input field, I want to update what they've typed somewhere else on the page. This all works fine. I've bound the update to the keyup, change and click events.

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

The only problem is if you select an input from the browser's autocomplete box, it does not update. Is there any event that triggers when you select from autocomplete (it's apparently neither change nor click). Note that if you select from the autocomplete box and the blur the input field, the update will be triggered. I would like for it to be triggered as soon as the autocomplete .

参见:http://jsfiddle.net/pYKKp/(希望你已经填写了很多过去的表单，输入名为电子邮件").

See: http://jsfiddle.net/pYKKp/ (hopefully you have filled out a lot of forms in the past with an input named "email").

<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>'); 
    } 
}); 

推荐答案

我推荐使用 monitorEvents.这是 网络检查器和firebug 打印出由元素生成的所有事件.以下是您将如何使用它的示例:

I recommending using monitorEvents. It's a function provide by the javascript console in both web inspector and firebug that prints out all events that are generated by an element. Here's an example of how you'd use it:

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

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

In your case, both Firefox and Opera generate an input event when the user selects an item from the autocomplete drop down. In IE7-8 a change event is produced after the user changes focus. The latest Chrome does generate a similar event.

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

A detailed browser compatibility chart can be found here:
https://developer.mozilla.org/en-US/docs/Web/Events/input

这篇关于自动完成时触发的任何事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！