如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
WebKit浏览器的解决方案
来自MDN文档:-webkit-autofill CSS伪类:
当一个元素的值被浏览器自动填充时，CSS伪类就会匹配
我们可以在<input>元素为:-webkit-autofill时定义一个void transition css规则。JS将能够钩到animationstart事件。
感谢Klarna UI团队。这里可以看到它们的实现:
CSS规则 JS钩
其他回答
在CSS中尝试
输入:-webkit-autofill { border-color: #9B9FC4 ! ｝
经过研究发现，webkit浏览器在自动完成时不会触发更改事件。我的解决方案是自己获取webkit添加的自动填充类并触发更改事件。
setTimeout(function() {
if($('input:-webkit-autofill').length > 0) {
//do some stuff
}
},300)
这里是一个链接的问题在铬。https://bugs.chromium.org/p/chromium/issues/detail?id=636425
我在用户名上使用了blur事件来检查pwd字段是否已被自动填充。
$('#userNameTextBox').blur(function () {
if ($('#userNameTextBox').val() == "") {
$('#userNameTextBox').val("User Name");
}
if ($('#passwordTextBox').val() != "") {
$('#passwordTextBoxClear').hide(); // textbox with "Password" text in it
$('#passwordTextBox').show();
}
});
这适用于IE，应该适用于所有其他浏览器(我只检查了IE)
这里有一个技巧来理解浏览器是否填充输入(布尔):
const inputEl = inputRef.current; // select the el with any way, here is ReactJs ref
let hasValue;
try {
hasValue = inputRef.current.matches(':autofill');
} catch (err) {
try {
hasValue = inputRef.current.matches(':-webkit-autofill');
} catch (er) {
hasValue = false;
}
}
// hasValue (boolean) is ready
在最后一个大括号之后，hasValue就可以使用了。您可以检测浏览器是否发生了自动填充。
似乎有一个解决方案，不依赖轮询(至少Chrome)。它几乎是一样的粗鄙，但我确实认为比全球民意调查好一点。
考虑以下场景:
用户开始填写字段1 用户选择一个自动完成建议，自动填充field2和field3
解决方案:在所有字段上注册一个onblur，通过下面的jQuery片段$(':-webkit-autofill')检查自动填充字段的存在
这不会是立即的，因为它会延迟到用户模糊field1，但它不依赖于全局轮询，所以在我看来，这是一个更好的解决方案。
也就是说，由于按回车键可以提交表单，您可能还需要相应的onkeypress处理程序。
或者，你可以使用全局轮询来检查$(':-webkit-autofill')
