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

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

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

if (autoFilled == true) {

} else {

}

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

可能重复

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

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

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


当前回答

似乎有一个解决方案,不依赖轮询(至少Chrome)。它几乎是一样的粗鄙,但我确实认为比全球民意调查好一点。

考虑以下场景:

用户开始填写字段1 用户选择一个自动完成建议,自动填充field2和field3

解决方案:在所有字段上注册一个onblur,通过下面的jQuery片段$(':-webkit-autofill')检查自动填充字段的存在

这不会是立即的,因为它会延迟到用户模糊field1,但它不依赖于全局轮询,所以在我看来,这是一个更好的解决方案。

也就是说,由于按回车键可以提交表单,您可能还需要相应的onkeypress处理程序。

或者,你可以使用全局轮询来检查$(':-webkit-autofill')

其他回答

我在使用Instagram自动填充电子邮件和电话输入时遇到了这个问题,尝试了不同的解决方案,但没有任何效果。最后,我所要做的就是禁用自动填充,为电话和电子邮件设置不同的名称属性。

我的解决方案:

像往常一样监听更改事件,并在DOM内容加载上执行以下操作:

setTimeout(function() {
    $('input').each(function() {
        var elem = $(this);
        if (elem.val()) elem.change();
    })
}, 250);

这将在用户有机会编辑所有非空字段之前触发更改事件。

我用这个方法来解决同样的问题。

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');
});

我成功的chrome与:

    setTimeout(
       function(){
          $("#input_password").focus();
          $("#input_username").focus();
          console.log($("#input_username").val());
          console.log($("#input_password").val());
       }
    ,500);

WebKit浏览器的解决方案

来自MDN文档:-webkit-autofill CSS伪类:

当一个元素的值被浏览器自动填充时,CSS伪类就会匹配

我们可以在<input>元素为:-webkit-autofill时定义一个void transition css规则。JS将能够钩到animationstart事件。

感谢Klarna UI团队。这里可以看到它们的实现:

CSS规则 JS钩