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

Question

我有一个非常简单的表格。 当用户在输入字段中输入时，我想更新他们在页面其他地方输入的内容。 这一切正常。 我已将更新绑定到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 检查器和firebug中的 javascript 控制台提供的功能，可打印出元素生成的所有事件。 这是一个如何使用它的示例：

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

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

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

Answer 2

这是一个很棒的解决方案。

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

我用 Chrome 和 Firefox 进行了测试，它也适用于其他浏览器。

我已经尝试了很多包含许多元素的事件，但只有当您从自动完成中选择时才会触发。

希望它能节省一些人的时间。

Answer 3

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

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

Answer 4

正如Xavi 所解释的那样，没有 100% 跨浏览器的解决方案，所以我为此创建了一个技巧（需要 5 个步骤）：
1.我需要几个新数组：

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

2.专注于我想触发的输入文本（在你的例子中是“电子邮件”，在我的例子中是“姓名”）我设置了一个间隔，例如使用jQuery（不需要考虑）：

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

3.在模糊时，我删除了间隔：（总是使用 jQuery，不需要考虑），并验证值是否更改

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 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”，指的是您触发的输入 HTML 元素。 必须指定 id 才能使该函数工作，并且您可以传递函数、函数名称或命令字符串作为回调。

5.最后你可以在输入值改变时做一些事情，即使是从自动完成下拉列表中选择了一个值

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

重要提示：您在上述函数中再次使用“this”来指代您触发的输入 HTML 元素。

工作小提琴！！！
我知道这听起来很复杂，但事实并非如此。
我为您准备了一个工作小提琴，更改的输入名为“名称”，因此如果您曾经在在线表单中输入过您的姓名，您可能会有一个自动完成的浏览器下拉列表进行测试。

Answer 5

使用 jQuery 或 JAVASCRIPT 检测表单输入的自动完成

使用：事件输入。 选择（输入或文本区域）值建议

以 JQUERY 为例：

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

});

以 JAVASCRIPT 为例：

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

这个开始ajax查询...

Answer 6

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

Luca 的回答对我来说太复杂了，所以我创建了自己的简短版本，希望能帮助某人（甚至可能是未来的我）：

    $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 上进行了测试。

Answer 7

我已经通过monitorEvents意识到至少在 Chrome 中， keyup事件在自动完成input事件之前被触发。 在普通键盘输入上，序列是keydown input keyup ，所以在输入之后。

我所做的是：

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

需要用其他浏览器检查，但这可能是一种没有间隔的方式。

Answer 8

我认为您不需要为此事件：这只会发生一次，并且没有很好的浏览器范围的支持，如@xavi 的回答所示。

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