自动完成时触发的任何事件?

我有一个非常简单的forms。 当用户input一个input字段时,我想更新他们在页面上的其他地方input的内容。 这一切工作正常。 我已经将更新绑定到了keyupchangeclick事件。

唯一的问题是,如果您从浏览器的自动填充框中select一个input,它不会更新。 是否有任何事件触发,当你从自动完成select(这显然不是changeclick )。 请注意,如果您从自动填充框中select并模糊了input字段,则会触发更新。 我希望自动完成后立即触发它。

请参阅: http : //jsfiddle.net/pYKKp/ (希望你填写了很多表单,过去用一个名为“email”的input)。

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

我build议使用monitorEvents 。 这是一个由web控制器和firebug中的javascript控制台提供的function,它打印出元素生成的所有事件。 下面是一个如何使用它的例子:

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

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

详细的浏览器兼容性图表可以在这里find:
https://developer.mozilla.org/en-US/docs/Web/Events/input

这是一个很棒的解决scheme。

 $('html').bind('input', function() { alert('test'); }); 

我使用Chrome和Firefox进行了testing,并且也适用于其他浏览器。

我已经尝试了很多元素的事件,但只有当您从自动完成中select时,才会触发此事件。

希望能节省一些时间。

正如Xavi所解释的那样,没有一个100%的跨浏览器的解决scheme,所以我为自己创build了一个技巧(继续进行5个步骤):
我需要一些新的数组:

 window.timeouts = new Array(); window.memo_values = new Array(); 

2.关注我想要触发的input文本(在你的情况下,“email”,在我的例子“名称”)我设置了一个间隔,例如使用jQuery(不需要考虑):

 jQuery('#name').focus(function () { var id = jQuery(this).attr('id'); window.timeouts[id] = setInterval('onChangeValue.call(document.getElementById("'+ id +'"), doSomething)', 500); }); 

3.关于模糊我删除了间隔:(总是使用jQuery不需要的想法),并validation值是否改变

 jQuery('#name').blur(function () { var id = jQuery(this).attr('id'); onChangeValue.call(document.getElementById(id), doSomething); clearInterval(window.timeouts[id]); delete window.timeouts[id]; }); 

4.现在,检查变化的主要function如下

 function onChangeValue(callback) { if (window.memo_values[this.id] != this.value) { window.memo_values[this.id] = this.value; if (callback instanceof Function) { callback.call(this); } else { eval( callback ); } } } 

重要提示:你可以在上面的函数中使用“this”,引用你的触发inputHTML元素。 必须指定id才能使该函数正常工作,并且可以传递函数,函数名称或命令string作为callback函数。

5.最后,当input值改变时,即使从自动完成下拉列表中select了一个值,也可以做些什么

 function doSomething() { alert('got you! '+this.value); } 

重要提示:再次在上面的函数中使用“this”来引用您触发的inputHTML元素。

工作菲德尔!
我知道这听起来很复杂,但事实并非如此。
我为你准备了一个工作小提琴 ,要改变的input被命名为“名称”,所以如果你曾经在线表单input你的名字,你可能有一个自动完成下拉列表中的浏览器来testing。

添加“模糊”。 适用于所有浏览器!

 $("input").on('blur keyup change click', function () { 

我不认为你需要这样一个事件:这只发生一次,并没有良好的浏览器范围内的支持,如@ xavi的答案所示。

只需要在加载一次函数后添加一个函数来检查字段是否有任何默认值的变化,或者如果只是将某个值复制到另一个地方,只需复制它以确保它已正确初始化。

唯一确定的方法是使用间隔。

卢卡的回答对我来说太复杂了,所以我创build了自己的短版本,希望能帮助某个人(甚至可能来自未来):

  $input.on( 'focus', function(){ var intervalDuration = 1000, // ms interval = setInterval( function(){ // do your tests here // .................. // when element loses focus, we stop checking: if( ! $input.is( ':focus' ) ) clearInterval( interval ); }, intervalDuration ); } ); 

在Chrome,Mozilla甚至IE上testing。

使用jQuery或JAVASCRIPT检测表单input上的自动完成

使用:事件input 。 select(input或textarea)值的build议

以JQUERY为例:

 $(input).on('input', function() { alert("Number selected "); 

});

以JAVASCRIPT为例:

 <input type="text" onInput="affiche(document.getElementById('something').text)" name="Somthing" /> 

这开始ajax查询…

我已经通过monitorEvents意识到至less在Chrome中, keyup事件在自动完成input事件之前被触发。 在正常的键盘input上,序列是按键input键入的,所以input之后。

那么我做的是:

 let myFun = ()=>{ ..do Something }; input.addEventListener('change', myFun ); //fallback in case change is not fired on autocomplete let _k = null; input.addEventListener( 'keydown', (e)=>_k=e.type ); input.addEventListener( 'keyup', (e)=>_k=e.type ); input.addEventListener( 'input', (e)=>{ if(_k === 'keyup') myFun();}) 

需要与其他浏览器检查,但这可能是一个没有间隔的方式。