如何判断浏览器是否已自动填充文本框?特别是用户名和密码框,自动填充页面加载。

我的第一个问题是,这在页面加载序列中什么时候发生?是在document.ready之前还是之后?

其次,我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生,只是挂钩到事件。最好是这样的:

if (autoFilled == true) {

} else {

}

如果可能的话,我很想看到一个jsfiddle显示你的答案。

可能重复

DOM事件浏览器密码自动填充?

浏览器自动填充和Javascript触发事件

这两个问题都没有真正解释什么事件被触发,它们只是不断地重新检查文本框(对性能不好!)


当前回答

经过研究发现,webkit浏览器在自动完成时不会触发更改事件。我的解决方案是自己获取webkit添加的自动填充类并触发更改事件。

setTimeout(function() {
 if($('input:-webkit-autofill').length > 0) {
   //do some stuff
 }
},300)

这里是一个链接的问题在铬。https://bugs.chromium.org/p/chromium/issues/detail?id=636425

其他回答

从我个人的经验来看,下面的代码在firefox IE和safari中工作得很好,但在chrome中选择自动完成时工作得不太好。

function check(){
clearTimeout(timeObj);
 timeObj = setTimeout(function(){
   if($('#email').val()){
    //do something
   }
 },1500);
}

$('#email').bind('focus change blur',function(){
 check();
});

下面的代码工作得更好,因为它会触发每次用户点击输入字段,从那里你可以检查输入字段是否为空。

$('#email').bind('click', function(){
 check();
});

如果有人正在寻找一个解决方案(就像我今天一样),来监听浏览器的自动填充更改,这里有一个我已经构建的自定义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!");
});

除了其他答案,我喜欢添加这个帮助函数,它可以防止脚本错误,你可以使用例如在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;
    }
  });
}

在Chrome和Edge(2020)中检查:-webkit-autofill会告诉你输入已经填充。但是,在用户以某种方式与页面交互之前,JavaScript无法获得输入中的值。

使用$('x').focus()和$('x').blur()或在代码中触发鼠标事件都没有帮助。

参见https://stackoverflow.com/a/35783761/32429

在github上有一个新的polyfill组件来解决这个问题。看看autofill-event。只需要安装它和voilà,自动填充工作如预期。

bower install autofill-event