检测浏览器自动填充

javascript jquery event-handling events autofill

2022-08-30 00:57:05

如何判断浏览器是否自动填充了文本框？特别是使用在页面加载周围自动填充的用户名和密码框。

我的第一个问题是，在页面加载序列中，这种情况何时发生？它是在文档准备就绪之前还是之后？

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

if (autoFilled == true) {

} else {

}

如果可能的话，我很想看到一个jsfiddle显示你的答案。

可能的重复项

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

--这两个问题都不能真正解释触发了什么事件，它们只是不断地重新检查文本框（对性能不利！

答案 1

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

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

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

你可以有一个很好的阅读这里这里

答案 2

适用于 WebKit 浏览器的解决方案

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

当元素的值由浏览器自动填充时，：-webkit-autofill CSS 伪类匹配

一旦所需的元素被编辑，我们可以在它上面定义一个void transition css规则.JS然后就可以挂接到事件上。<input>:-webkit-autofillanimationstart

归功于Klarna UI团队。在这里看到他们漂亮的实现：