自动完成触发任何事件吗？

Question 1

我有一个非常简单的表格。当用户在输入字段中键入内容时，我想更新他们在页面上其他位置键入的内容。这一切都很好。我已经绑定的更新的keyup，change和click事件。

唯一的问题是，如果您从浏览器的自动完成框中选择一个输入，则该输入不会更新。当您从自动完成功能中进行选择时，是否会触发任何事件（显然既不是change也不是click）。请注意，如果您从“自动完成”框中选择并模糊了输入字段，则将触发更新。我希望自动完成会立即触发它。

请参阅：http : //jsfiddle.net/pYKKp/（希望您过去用“电子邮件”输入填写了很多表格）。

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

Question 2

我建议使用monitorEvents。它是Web检查器和Firebug中的javascript控制台提供的功能，可打印出由元素生成的所有事件。以下是使用方式的示例：

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

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

可以在这里找到详细的浏览器兼容性图表：https :
//developer.mozilla.org/zh-CN/docs/Web/Events/input

Question 3

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

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

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

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

希望可以节省一些时间。

Question 4

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

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

Question 5

正如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元素。

工作之地！！！
我知道这听起来很复杂，但事实并非如此。
我为您准备了一个有效的小提琴，要更改的输入名为“名称”，因此，如果您以在线形式输入名称，则可能会有要测试的浏览器的自动完成下拉列表。

Question 6

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

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

以JQUERY为例：

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

}）;

例如JAVASCRIPT：

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

这开始ajax查询...

Question 7

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

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

Question 8

我已经意识到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();})

需要使用其他浏览器进行检查，但这可能是没有间隔的方法。

Question 9

我不认为您需要为此事件：仅发生一次，并且@xavi的答案显示，对此没有良好的浏览器支持。

只需在加载正文之后添加一个函数，即可检查一次字段以检查默认值的任何更改，或者仅是将某个值复制到另一个位置的问题，只需复制它以确保正确初始化即可。