如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
对于任何正在寻找2020年纯JS解决方案来检测自动填充的人来说，这里就是。
请原谅标签错误，不能让这坐得很好，所以
//Chose the element you want to select - in this case input
var autofill = document.getElementsByTagName('input');
for (var i = 0; i < autofill.length; i++) {
//Wrap this in a try/catch because non webkit browsers will log errors on this pseudo element
try{
if (autofill[i].matches(':-webkit-autofill')) {
//Do whatever you like with each autofilled element
}
}
catch(error){
return(false);
}
}
其他回答
这里有一个技巧来理解浏览器是否填充输入(布尔):
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就可以使用了。您可以检测浏览器是否发生了自动填充。
我用这个方法来解决同样的问题。
HTML代码应该改为这样:
<input type="text" name="username" />
<input type="text" name="password" id="txt_password" />
jQuery代码应该在document.ready中:
$('#txt_password').focus(function(){
$(this).attr('type','password');
});
WebKit浏览器的解决方案
来自MDN文档:-webkit-autofill CSS伪类:
当一个元素的值被浏览器自动填充时，CSS伪类就会匹配
我们可以在<input>元素为:-webkit-autofill时定义一个void transition css规则。JS将能够钩到animationstart事件。
感谢Klarna UI团队。这里可以看到它们的实现:
CSS规则 JS钩
在2020年，这是我在chrome中工作的方法:
// wait 0.1 sec to execute action after detecting autofill
// check if input username is autofilled by browser
// enable "login" button for click to submit form
$(window).on("load", function(){
setTimeout(function(){
if ($("#UserName").is("input:-webkit-autofill"))
$("#loginbtn").prop('disabled', false);
}, 100);
});
在github上有一个新的polyfill组件来解决这个问题。看看autofill-event。只需要安装它和voilà，自动填充工作如预期。
bower install autofill-event
