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

Posted 2023-03-05

【中文标题】自动完成时触发的任何事件？

【英文标题】：Any event triggered on autocomplete?

【发布时间】：2012-01-22 19:52:06

【问题描述】：

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

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

请参阅：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>'); 
     
); 

【问题讨论】：

查看我的回答here

【参考方案1】：

我通过monitorEvents 意识到，至少在 Chrome 中，keyup 事件是在 在自动完成 input 事件之前触发的。在正常的键盘输入中，序列是keydowninputkeyup，所以在输入之后。

我当时做的是：

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

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

【参考方案2】：

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

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

JQUERY 示例：

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

);

以 JAVASCRIPT 为例：

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

这个启动ajax查询...

【参考方案3】：

我推荐使用monitorEvents。这是web inspector 和firebug 中的javascript 控制台提供的一个函数，它打印出一个元素生成的所有事件。这是您如何使用它的示例：

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

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

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

【讨论】：

谢谢，这至少对 Firefox 有帮助。 change 事件似乎仍然是在模糊时触发的，所以我不需要观看模糊。

顺便说一句，听input 对 Opera 也有帮助。

我刚刚测试了监听input 事件，它适用于我安装的所有浏览器。版本：Firefox 21.0、Opera 12.15、Chrome 27、Safari 5.1.7 和 IE 9。

Here 你有一个input 事件的兼容浏览器列表。我在 Chromium 55 中对其进行了测试，对我来说效果很好。

对当前选定的 dom 元素使用 monitorEvents($0) 也可能很有用。省去了寻找正确选择器的麻烦。

【参考方案4】：

唯一可靠的方法是使用间隔。

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

【参考方案5】：

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

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

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

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

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

【讨论】：

这不适用于所有浏览器，但是，它确实适用于大多数未触发 change 事件的浏览器，因此您只需要为 change 添加一个侦听器和input 事件。 $field.on('change input', changeFunction)

我使用 $input.on('keyup input change paste', callback) 。效果很好。

【参考方案6】：

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

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

【讨论】：

自动完成输入时不会触发这些事件。阅读 OP。

@machineaddict 自动完成不是 javascript 事件。您可以做的是编辑您的自动完成功能以在自动完成时运行另一个功能。如果你想分享你的自动完成功能，我可以看看并帮助你。

自动完成有一个事件，read this。答案在this page 上，并且运行良好。你应该编辑你的答案。

第一个答案清楚地表明它不适用于所有浏览器。第二个答案完全符合我在之前评论中的建议。没有像 onAutocomplete 这样的事件监听器。我很高兴您找到了解决问题的方法。感谢分享链接。他们可能会帮助某人。

【参考方案7】：

正如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 元素。 工作小提琴！！！ 我知道这听起来很复杂，但事实并非如此。 我为您准备了一个working fiddle，要更改的输入名为“姓名”，因此如果您曾经在在线表格中输入您的姓名，您可能会有一个自动完成的浏览器下拉列表进行测试。

【参考方案8】：

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

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