如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
如果有人正在寻找一个解决方案(就像我今天一样)，来监听浏览器的自动填充更改，这里有一个我已经构建的自定义jquery方法，只是为了简化向输入添加更改侦听器的过程:
$.fn.allchange = function (callback) {
var me = this;
var last = "";
var infunc = function () {
var text = $(me).val();
if (text != last) {
last = text;
callback();
}
setTimeout(infunc, 100);
}
setTimeout(infunc, 100);
};
你可以这样调用它:
$("#myInput").allchange(function () {
alert("change!");
});
其他回答
好吧，如果我们谈论的是控制输入，这可能是一个可能的解决方案:
useEffect(() => {
const inputEl = inputRef.current
inputEl.addEventListener('focusout', () => props.onChange(inputRef.value))
}, [])
注意，这可能会导致不必要的渲染。这种解决方案的优点是简单性和所有浏览器的支持。在小型形式中使用这种方法似乎是完全可以接受的。
问题是不同的浏览器处理自动填充的方式不同。有些调度变更事件，有些则不调度。因此，当浏览器自动完成一个输入字段时，几乎不可能钩到一个事件。
更改不同浏览器的事件触发器: 对于用户名/密码字段: Firefox 4、IE 7和IE 8不分派更改事件。 Safari 5和Chrome 9会分派更改事件。 对于其他表单字段: ie7和ie8不分派变更事件。 当用户从建议列表中选择一个值并从字段中选择tab时，Firefox 4会分派change change事件。 Chrome 9不会分派更改事件。 Safari 5确实分派了更改事件。
你最好的选择是在你的表单中使用autocomplete="off"来禁用表单的自动完成功能，或者定期轮询查看它是否已填充。
关于你问的是在文件上还是之前填写的问题。不同浏览器，甚至不同版本都不一样。对于用户名/密码字段，仅当您选择用户名时才填写密码字段。因此，如果你试图附加到任何事件，你会有一个非常混乱的代码。
你可以在这里好好阅读一下
我读了很多关于这个问题的文章，想提供一个非常快速的解决方法来帮助我。
let style = window.getComputedStyle(document.getElementById('email'))
if (style && style.backgroundColor !== inputBackgroundNormalState) {
this.inputAutofilledByBrowser = true
}
我的模板的inputBackgroundNormalState是'rgb(255,255,255)'。
所以基本上当浏览器应用自动补全时，他们倾向于通过在输入上应用不同的(烦人的)黄色来指示输入是自动填充的。
编辑:这适用于所有浏览器
$('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上测试。
在CSS中尝试
输入:-webkit-autofill { border-color: #9B9FC4 ! ｝
