检测浏览器自动填充

Question

您如何判断浏览器是否已自动填充文本框？特别是对于在页面加载时自动填充的用户名和密码框。

我的第一个问题是这在页面加载顺序中何时发生？是在 document.ready 之前还是之后？

其次，我如何使用逻辑来查明这是否发生了？并不是我想阻止这种情况发生，只是挂钩到事件中。最好是这样的：

 if (autoFilled == true) {

} else {

}

如果可能的话，我很乐意看到一个 jsfiddle 显示您的答案。

可能重复

浏览器密码自动填充的 DOM 事件？

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

–这两个问题并没有真正解释触发了什么事件，它们只是不断地重新检查文本框（不利于性能！）。

原文由 Undefined 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是不同浏览器对自动填充的处理方式不同。有些会发送更改事件，有些则不会。因此，几乎不可能挂钩浏览器自动完成输入字段时触发的事件。

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

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

    1. Firefox 4、IE 7 和 IE 8 不发送 change 事件。
    2. Safari 5 和 Chrome 9 会发送 change 事件。

  • 对于其他表单域：

    1. IE 7 和 IE 8 不发送 change 事件。
    2. 当用户从建议列表中选择一个值并跳出字段时，Firefox 4 会发送 change change 事件。
    3. Chrome 9 不调度 change 事件。
    4. Safari 5 确实调度了 change 事件。

您最好的选择是在您的表单中使用 autocomplete="off" 禁用表单的自动完成功能，或者定期轮询以查看其是否已填写。

关于是否在 document.ready 之前或之前填写的问题，它因浏览器而异，甚至因版本而异。对于用户名/密码字段，仅当您选择用户名密码字段时才会填写。因此，如果您尝试附加到任何事件，您将得到一个非常混乱的代码。

你可以在 这里 好好阅读

原文由 afrin216 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

WebKit 浏览器的解决方案

来自 :-webkit-autofill CSS 伪类的 MDN 文档：

:-webkit-autofill CSS 伪类匹配浏览器自动填充元素的值

我们可以在所需的 <input> 元素上定义一个 void transition css 规则，一旦它被 :-webkit-autofill 编辑。然后 JS 将能够挂钩到 animationstart 事件。

感谢 Klarna UI 团队。在这里看到他们很好的实现：

• CSS 规则
• JS钩子

原文由 Lev Kazakov 发布，翻译遵循 CC BY-SA 3.0 许可协议