检测浏览器自动填充

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

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

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

if (autoFilled == true) {

} else {

}

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

可能重复

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

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

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

当前回答

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

2022-09-23 08:34:36

其他回答

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

2014-08-19 21:14:38

从我个人的经验来看，下面的代码在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();
});

2017-01-25 08:03:31

我有这个问题的完美解决方案，试试这个代码片段。演示在这里

2017-06-26 09:54:55

我在用户名上使用了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)

2014-04-29 22:39:37

您可以尝试检测并清除所有自动填充

 var autofillclear = false;
  setInterval(function() {
    if ($("input:-webkit-autofill") && autofillclear == false) {
      $("input:-webkit-autofill").each(function() {
        if ($(this).val() != '') {
          $(this).val('');
          autofillclear = true;
        }
      });
    }
   }, 500);

2021-08-05 09:07:47

检测浏览器自动填充

推荐文章

最新文章

标签