浏览器自动填充和 Javascript 触发事件答案

【问题标题】：Browser Autofill and Javascript triggered events浏览器自动填充和 Javascript 触发事件
【发布时间】：2011-06-23 17:17:22
【问题描述】：

我们的一位用户刚刚提出，他们的浏览器自动填充不会导致 JS onChange 事件触发；这会导致我们的用户注册出现问题。

这是设计使然吗？有办法解决吗？

【问题讨论】：

这能回答你的问题吗？ Detecting Browser Autofill

标签： javascript autofill

【解决方案1】：

您是否尝试过使用 onpropertychanged 而不是 onchange 事件？这仅适用于 IE，并且是 MSDN 上推荐的修复方法。

【讨论】：

我愿意，但作为一个有数十万人通过各种浏览器查看的网站，我认为这不会很好。
这看起来很相似：stackoverflow.com/questions/343192/…

【解决方案2】：

我偶尔使用的一个解决方案是检查字段/输入/选择的值是否与其默认值不同。 defaultValue 将是最初在标记中的值，而 value 是当前值，也就是选择或输入的值。即使表单是自动填充的，这也可能会有所不同。

如果您想完全关闭自动填充，最好在与您的逻辑直接相关的字段上添加 autocomplete="off"。

【讨论】：

我也尝试了类似的解决方案，但问题是我将文本设置为 "" 之后，chrome 的自动完成功能再次将我的凭据放在那里...
Chrome 现在会覆盖自动完成功能，并认为自动完成所有内容是更好的用户体验：-\

【解决方案3】：

这是一个相当不错的解决方案，其功能类似于 jishi 描述的内容：

https://web.archive.org/web/20131125153914/http://furrybrains.com/2009/01/02/capturing-autofill-as-a-change-event/

用 Wayback Machine 链接更新了损坏的链接

【讨论】：

回程机链接web.archive.org/web/20131125153914/http://furrybrains.com/2009/…

【解决方案4】：

以防万一有人仍在寻找解决方案（就像我今天一样），要监听浏览器自动填充更改，这是我构建的自定义 jquery 方法，只是为了简化添加更改监听器时的过程输入：

    $.fn.allchange = function (callback) {
        var me = this;
        var last = "";
        var infunc = function () {
            var text = $(me).val();
            if (text != last) {
                last = text;
                callback();
            }
            setTimeout(infunc, 100);
        }
        setTimeout(infunc, 100);
    };

你可以这样称呼它：

$("#myInput").allchange(function () {
    alert("change!");
});

【讨论】：

虽然这个解决方案可行，但它在 cpu 周期上的成本很高。 This 是更好的解决方案。

【解决方案5】：

如果您想获得自动填充行为但更改样式，也许您可以执行以下操作 (jQuery)：

$(window).load(function(){  
  if($('input:-webkit-autofill')){   
    $('input:-webkit-autofill').each(function(){
      //put your conditions here 
    });   
    // RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT'S TO VAR FOR FASTER PROCESSING 
}});

【讨论】：