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

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

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

if (autoFilled == true) {

} else {

}

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

可能重复

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

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

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


当前回答

$('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上测试。

其他回答

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

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

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

在CSS中尝试

输入:-webkit-autofill { border-color: #9B9FC4 ! }

我成功的chrome与:

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

经过研究发现,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 4、IE 7和IE 8不分派更改事件。 Safari 5和Chrome 9会分派更改事件。 对于其他表单字段: ie7和ie8不分派变更事件。 当用户从建议列表中选择一个值并从字段中选择tab时,Firefox 4会分派change change事件。 Chrome 9不会分派更改事件。 Safari 5确实分派了更改事件。

你最好的选择是在你的表单中使用autocomplete="off"来禁用表单的自动完成功能,或者定期轮询查看它是否已填充。

关于你问的是在文件上还是之前填写的问题。不同浏览器,甚至不同版本都不一样。对于用户名/密码字段,仅当您选择用户名时才填写密码字段。因此,如果你试图附加到任何事件,你会有一个非常混乱的代码。

你可以在这里好好阅读一下