检测浏览器自动填充

Question

检测浏览器自动填充

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

我的第一个问题是，在页面加载序列中什么时候会发生这种情况？是在文件之前还是之后准备好了？

第二，如何用逻辑来判断是否发生了这种情况？我并不是想阻止这一切的发生，只想和事件挂钩。最好是这样的：

if (autoFilled == true) {} else {}

如果可能的话，我想看看你的答案。

可能重复

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

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

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

Answer 1

问题是，不同的浏览器以不同的方式处理自动填充。有些人分派更改事件，有些人没有。因此，当浏览器自动完成输入字段时，几乎不可能将事件挂钩到触发的事件上。更改不同浏览器的事件触发器：对于用户名/密码字段：对于其他表单字段：IE7和IE8不发送更改事件。当用户从字段中的建议和选项卡列表中选择一个值时，Firefox 4确实会分派更改事件。Chrome 9不发送更改事件。Safari 5确实会分派更改事件。Firefox 4、IE7和IE8不发送更改事件。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方法，以便在向输入中添加更改侦听器时简化过程：&nbsp;&nbsp;&nbsp;&nbsp;$.fn.allchange&nbsp;=&nbsp;function&nbsp;(callback)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;me&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;last&nbsp;=&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;infunc&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;text&nbsp;=&nbsp;$(me).val(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(text&nbsp;!=&nbsp;last)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;last&nbsp;=&nbsp;text; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(infunc,&nbsp;100); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(infunc,&nbsp;100); &nbsp;&nbsp;&nbsp;&nbsp;};你可以这样称呼它：$("#myInput").allchange(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;alert("change!");});