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

Question

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

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

Answer 1

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

如果您想完全关闭自动填充，添加 autocomplete="off" 可能是明智之举
与您的逻辑直接相关的字段。

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

Answer 3

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

Answer 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!");
});

Answer 5

这是一个非常好的解决方案，其功能与 jishi 所描述的类似：

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

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