检测浏览器自动填充

Question

检测浏览器自动填充如何判断浏览器是否已自动填充文本框？特别是与用户名和密码框，自动填充周围的页面加载。我的第一个问题是，在页面加载序列中什么时候会发生这种情况？是在文件之前还是之后准备好了？第二，如何用逻辑来判断是否发生了这种情况？我并不是想阻止这一切的发生，只想和事件挂钩。最好是这样的：if (autoFilled == true) {} else {}如果可能的话，我想看看你的答案。可能重复DOM事件用于浏览器密码自动填充？浏览器自动填充和Javascript触发事件-这两个问题并不能真正解释触发了什么事件，它们只是不断地重新检查文本框(对性能不好！)

Answer 1

问题是，不同的浏览器以不同的方式处理自动填充。有些人分派更改事件，有些人没有。因此，当浏览器自动完成输入字段时，几乎不可能将事件挂钩到触发的事件上。

• 更改不同浏览器的事件触发器：

• 对于用户名/密码字段：

• 对于其他表单字段：

1. IE7和IE8不发送更改事件。
2. 当用户从字段中的建议和选项卡列表中选择一个值时，Firefox 4确实会分派更改事件。
3. Chrome 9不发送更改事件。
4. Safari 5确实会分派更改事件。
1. Firefox 4、IE7和IE8不发送更改事件。
2. Safari 5和Chrome 9确实分派了更改事件。

您最好的选择是禁用窗体的自动完成功能。autocomplete="off"在您的表单或定期轮询中查看是否已填充。

关于它是在文档上还是在文档之前填写的问题，请再次回答，它因浏览器而异，甚至不同版本。对于用户名/密码字段，只有在选择“用户名密码”字段时才填写。因此，如果您试图附加到任何事件，那么总共会有一个非常混乱的代码。

你可以好好读一读这里

Answer 2

WebKit浏览器的解决方案

从MDN文档中获取-webkit-自动填充css伪类：

当一个元素的值由浏览器自动填充时，该：-webkit自动填充css伪类匹配。

我们可以定义一个空白过渡所需CSS规则<input>元素一旦成为:-webkit-autofill爱德。然后JS将能够连接到animationstart事件。

学分Klarna UI团队。在这里看到它们的很好的实现：

• CSS规则

• JS钩

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