如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
我在使用Instagram自动填充电子邮件和电话输入时遇到了这个问题，尝试了不同的解决方案，但没有任何效果。最后，我所要做的就是禁用自动填充，为电话和电子邮件设置不同的名称属性。
其他回答
好吧，如果我们谈论的是控制输入，这可能是一个可能的解决方案:
useEffect(() => {
const inputEl = inputRef.current
inputEl.addEventListener('focusout', () => props.onChange(inputRef.value))
}, [])
注意，这可能会导致不必要的渲染。这种解决方案的优点是简单性和所有浏览器的支持。在小型形式中使用这种方法似乎是完全可以接受的。
我在用户名上使用了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)
WebKit浏览器的解决方案
来自MDN文档:-webkit-autofill CSS伪类:
当一个元素的值被浏览器自动填充时，CSS伪类就会匹配
我们可以在<input>元素为:-webkit-autofill时定义一个void transition css规则。JS将能够钩到animationstart事件。
感谢Klarna UI团队。这里可以看到它们的实现:
CSS规则 JS钩
您可以尝试检测并清除所有自动填充
var autofillclear = false;
setInterval(function() {
if ($("input:-webkit-autofill") && autofillclear == false) {
$("input:-webkit-autofill").each(function() {
if ($(this).val() != '') {
$(this).val('');
autofillclear = true;
}
});
}
}, 500);
我还面临着同样的问题，标签没有检测到自动填充和动画在填充文本上移动标签重叠，这个解决方案对我有用。
input:-webkit-autofill ~ label {
top:-20px;
}
