浏览器自动填充和JavaScript触发事件

Question

我们的一位用户提出，他们浏览器的自动填充功能不会触发JS的onChange事件，这给我们的用户注册造成了问题。

这是设计上的问题吗？有没有办法解决？

- Glen Solsberry

---

这个回答解决了你的问题吗？检测浏览器自动填充 - Jasper de Vries

我感到惊讶的是，在答案中没有提到这个库 > https://github.com/matteobad/detect-autofill - wnasich

Answer 1

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

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

- jishi

---

我也尝试了类似的解决方案，但问题是我将文本设置为“”，然后Chrome自动完成会再次放置我的凭据... - Revious

Chrome现在会覆盖掉“自动完成关闭”的设置，决定将自动完成应用到所有情况下，认为这样可以提供更好的用户体验。:-\ - webdevinci

Answer 2

如果你想获得自动填充的行为但更改样式，也许你可以像这样做（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 
}});

- Lavlesh Mishra

Answer 3

如果有人仍在寻找解决方案（就像我今天一样），以便监听浏览器的自动填充更改，这里是一个我构建的自定义 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!");
});

- LcSalazar

---

虽然这个方案可以工作，但在 CPU 周期方面太昂贵了。这个 是一个更好的解决方案。 - machineaddict

Answer 4

你尝试过使用onpropertychanged而不是onchange事件吗？这只适用于IE，也是MSDN推荐的修复方法。

- Satyajit

---

我想这样做，但作为一个被数十万人在各种浏览器上访问的网站，我认为这不会很有效。 - Glen Solsberry

这看起来很相似：https://dev59.com/z3RC5IYBdhLWcg3wS_EF - Satyajit

Answer 5

这里有一个相当不错的解决方案，与jishi所描述的类似：

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

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

- capnhairdo

---

网络存档链接 https://web.archive.org/web/20131125153914/http://furrybrains.com/2009/01/02/capturing-autofill-as-a-change-event/ - RSK