如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
我在用户名上使用了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)
其他回答
对于任何正在寻找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);
}
}
我用这个方法来解决同样的问题。
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');
});
您可以尝试检测并清除所有自动填充
var autofillclear = false;
setInterval(function() {
if ($("input:-webkit-autofill") && autofillclear == false) {
$("input:-webkit-autofill").each(function() {
if ($(this).val() != '') {
$(this).val('');
autofillclear = true;
}
});
}
}, 500);
例如，为了检测电子邮件，我尝试了“on change”和突变观察者，但都不起作用。setInterval与LinkedIn自动填充一起工作得很好(不透露我所有的代码，但你知道的)，如果你在这里添加额外的条件来降低AJAX的速度，它与后端一起工作得很好。如果表单字段没有变化，比如他们没有输入来编辑他们的电子邮件，lastEmail会阻止毫无意义的AJAX ping。
// lastEmail needs scope outside of setInterval for persistence.
var lastEmail = 'nobody';
window.setInterval(function() { // Auto-fill detection is hard.
var theEmail = $("#email-input").val();
if (
( theEmail.includes("@") ) &&
( theEmail != lastEmail )
) {
lastEmail = theEmail;
// Do some AJAX
}
}, 1000); // Check the field every 1 second
$('selector').on('keyup', aFunction);
// If tab is active, auto focus for trigger event keyup, blur, change...
// for inputs has been autofill
$(window).on('load', () => {
if (!document.hidden) {
window.focus();
}
})
这对我很有用。 在Chrome上测试。
