检测浏览器自动填充

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

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

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

if (autoFilled == true) {

} else {

}

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

可能重复

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

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

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

当前回答

我的解决方案是:

    $.fn.onAutoFillEvent = function (callback) {
        var el = $(this),
            lastText = "",
            maxCheckCount = 10,
            checkCount = 0;

        (function infunc() {
            var text = el.val();

            if (text != lastText) {
                lastText = text;
                callback(el);
            }
            if (checkCount > maxCheckCount) {
                return false;
            }
            checkCount++;
            setTimeout(infunc, 100);
        }());
    };

  $(".group > input").each(function (i, element) {
      var el = $(element);

      el.onAutoFillEvent(
          function () {
              el.addClass('used');
          }
      );
  });

2017-06-20 11:39:02

其他回答

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

2021-08-26 12:44:14

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

2017-06-26 09:54:55

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

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

2014-09-17 14:56:03

这里有一个技巧来理解浏览器是否填充输入(布尔):

const inputEl = inputRef.current; // select the el with any way, here is ReactJs ref
let hasValue;
try {
  hasValue = inputRef.current.matches(':autofill');
} catch (err) {
  try {
    hasValue = inputRef.current.matches(':-webkit-autofill');
  } catch (er) {
    hasValue = false;
  }
}

// hasValue (boolean) is ready

在最后一个大括号之后，hasValue就可以使用了。您可以检测浏览器是否发生了自动填充。

2021-12-01 10:37:28

对于任何正在寻找2020年纯JS解决方案来检测自动填充的人来说，这里就是。

请原谅标签错误，不能让这坐得很好，所以

    //Chose the element you want to select - in this case input
    var autofill = document.getElementsByTagName('input');
    for (var i = 0; i < autofill.length; i++) {
      //Wrap this in a try/catch because non webkit browsers will log errors on this pseudo element
      try{
        if (autofill[i].matches(':-webkit-autofill')) {
            //Do whatever you like with each autofilled element
        }
      }
      catch(error){
        return(false);
      }
     }

2020-12-09 20:13:26

检测浏览器自动填充

推荐文章

最新文章

标签