如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
在Chrome和Edge(2020)中检查:-webkit-autofill会告诉你输入已经填充。但是，在用户以某种方式与页面交互之前，JavaScript无法获得输入中的值。
使用$('x').focus()和$('x').blur()或在代码中触发鼠标事件都没有帮助。
参见https://stackoverflow.com/a/35783761/32429
其他回答
在chrome上，你可以通过为自动填充元素设置一个特殊的css规则来检测自动填充字段，然后用javascript检查元素是否应用了该规则。
例子:
CSS
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px white inset;
}
JavaScript
let css = $("#selector").css("box-shadow")
if (css.match(/inset/))
console.log("autofilled:", $("#selector"))
我在用户名上使用了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)
从我个人的经验来看，下面的代码在firefox IE和safari中工作得很好，但在chrome中选择自动完成时工作得不太好。
function check(){
clearTimeout(timeObj);
timeObj = setTimeout(function(){
if($('#email').val()){
//do something
}
},1500);
}
$('#email').bind('focus change blur',function(){
check();
});
下面的代码工作得更好，因为它会触发每次用户点击输入字段，从那里你可以检查输入字段是否为空。
$('#email').bind('click', function(){
check();
});
我在使用Instagram自动填充电子邮件和电话输入时遇到了这个问题，尝试了不同的解决方案，但没有任何效果。最后，我所要做的就是禁用自动填充，为电话和电子邮件设置不同的名称属性。
在github上有一个新的polyfill组件来解决这个问题。看看autofill-event。只需要安装它和voilà，自动填充工作如预期。
bower install autofill-event
