检测浏览器自动填充

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

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

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

if (autoFilled == true) {

} else {

}

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

可能重复

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

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

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

当前回答

对于任何正在寻找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

其他回答

我也在找类似的东西。Chrome只有……在我的例子中，包装器div需要知道输入字段是否被自动填充。所以我可以给它额外的css就像Chrome在自动填充时对输入字段所做的那样。通过查看以上所有的答案，我的综合解决方案如下:

/* 
 * make a function to use it in multiple places
 */
var checkAutoFill = function(){
    $('input:-webkit-autofill').each(function(){
        $(this).closest('.input-wrapper').addClass('autofilled');
    });
}

/* 
 * Put it on the 'input' event 
 * (happens on every change in an input field)
 */
$('html').on('input', function() {
    $('.input-wrapper').removeClass('autofilled');
    checkAutoFill();
});

/*
 * trigger it also inside a timeOut event 
 * (happens after chrome auto-filled fields on page-load)
 */
setTimeout(function(){ 
    checkAutoFill();
}, 0);

这个工作的html将是

<div class="input-wrapper">
    <input type="text" name="firstname">
</div>

2018-06-02 12:14:03

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

2017-06-26 09:54:55

我为angularjs找到了一个有效的解决方案。

诀窍是在以下情况下禁用输入字段的required属性该指令检测字段是由浏览器通过自动填充填充的。

由于不再需要输入字段，登录提交按钮将被启用。

这即使用户没有点击进入窗口的主体(见Chrome自动填充/自动完成无值密码)。

指令:

angular.module('formtools').directive('autofill', [
        '$interval', function ($interval)
        {
            return {
                scope: false,
                require: 'autofill',
                controller: function AutoFillController(){
                    this.applied = false;
                },
                controllerAs: 'autoFill',
                link: function (scope, elem, attrs, autofill)
                {
                    var refresh = $interval(function() {
                        // attention: this needs jquery, jqlite from angular doesn't provide this method
                        if(elem.is(':-webkit-autofill'))
                        {
                            autofill.applied = true;
                            $interval.cancel(refresh);
                        }
                    }, 100, 100);
                }
            }
        }]);

HTML:

<form name="loginform">

  <input 
     type="text" 
     name="username" 
     autofill 
     ng-required="!autoFill.applied">
  
  <input 
     type="password" 
     name="password" 
     autofill 
     ng-required="!autoFill.applied">
     
  <button ng-disabled="loginform.$invalid">Login</button>   
</form>

2021-12-03 14:13:28

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

 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

我在最新的Firefox、Chrome和Edge浏览器上都能使用这种方法:

$('#email').on('blur input', function() {
    ....
});

2016-06-01 18:36:16

检测浏览器自动填充

推荐文章

最新文章

标签