如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
我的解决方案:
像往常一样监听更改事件，并在DOM内容加载上执行以下操作:
setTimeout(function() {
$('input').each(function() {
var elem = $(this);
if (elem.val()) elem.change();
})
}, 250);
这将在用户有机会编辑所有非空字段之前触发更改事件。
其他回答
下面是来自Klarna UI团队的CSS解决方案。参见它们的出色实现
对我来说没问题。
input:-webkit-autofill {
animation-name: onAutoFillStart;
transition: background-color 50000s ease-in-out 0s;
}
input:not(:-webkit-autofill) {
animation-name: onAutoFillCancel;
}
不幸的是，我发现唯一可靠的方法来检查这个跨浏览器是轮询输入。为了使它具有响应性，还需要侦听事件。 Chrome已经开始隐藏javascript的自动填充值，这需要一个hack。
Poll every half to third of a second ( Does not need to be instant in most cases ) Trigger the change event using JQuery then do your logic in a function listening to the change event. Add a fix for Chrome hidden autofill password values. $(document).ready(function () { $('#inputID').change(YOURFUNCTIONNAME); $('#inputID').keypress(YOURFUNCTIONNAME); $('#inputID').keyup(YOURFUNCTIONNAME); $('#inputID').blur(YOURFUNCTIONNAME); $('#inputID').focusin(YOURFUNCTIONNAME); $('#inputID').focusout(YOURFUNCTIONNAME); $('#inputID').on('input', YOURFUNCTIONNAME); $('#inputID').on('textInput', YOURFUNCTIONNAME); $('#inputID').on('reset', YOURFUNCTIONNAME); window.setInterval(function() { var hasValue = $("#inputID").val().length > 0;//Normal if(!hasValue){ hasValue = $("#inputID:-webkit-autofill").length > 0;//Chrome } if (hasValue) { $('#inputID').trigger('change'); } }, 333); });
在github上有一个新的polyfill组件来解决这个问题。看看autofill-event。只需要安装它和voilà，自动填充工作如预期。
bower install autofill-event
对于任何正在寻找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');
});
