如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
在CSS中尝试
输入:-webkit-autofill { border-color: #9B9FC4 ! ｝
其他回答
在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);
});
我为angularjs找到了一个有效的解决方案。
诀窍是在以下情况下禁用输入字段的required属性 该指令检测字段是由浏览器通过自动填充填充的。
由于不再需要输入字段，登录提交按钮将被启用。
这即使用户没有点击进入窗口的主体(见Chrome自动填充/自动完成无值密码)。
指令:
angular.module('formtools').directive('autofill', [
'$interval', function ($interval)
{
return {
scope: false,
require: 'autofill',
controller: function AutoFillController(){
this.applied = false;
},
controllerAs: 'autoFill',
link: function (scope, elem, attrs, autofill)
{
var refresh = $interval(function() {
// attention: this needs jquery, jqlite from angular doesn't provide this method
if(elem.is(':-webkit-autofill'))
{
autofill.applied = true;
$interval.cancel(refresh);
}
}, 100, 100);
}
}
}]);
HTML:
<form name="loginform">
<input
type="text"
name="username"
autofill
ng-required="!autoFill.applied">
<input
type="password"
name="password"
autofill
ng-required="!autoFill.applied">
<button ng-disabled="loginform.$invalid">Login</button>
</form>
我在使用Instagram自动填充电子邮件和电话输入时遇到了这个问题，尝试了不同的解决方案，但没有任何效果。最后，我所要做的就是禁用自动填充，为电话和电子邮件设置不同的名称属性。
除了其他答案，我喜欢添加这个帮助函数，它可以防止脚本错误，你可以使用例如在DOMContentLoaded或onload(与setTimeout >=500一起，因为有一些延迟，直到浏览器自动填充)，在输入元素上的onchange或表单上的onsubmit:
function isAutofilled(element) {
return [":autofill", ":-webkit-autofill", ":-moz-autofill"].some((selector) => {
try {
return element.matches(selector);
} catch {
return false;
}
});
}
我还面临着同样的问题，标签没有检测到自动填充和动画在填充文本上移动标签重叠，这个解决方案对我有用。
input:-webkit-autofill ~ label {
top:-20px;
}
