我花了几个小时解决的问题，检测自动填充输入在第一页加载(没有任何用户采取行动)，并发现理想的解决方案，工作在Chrome, Opera，边缘和FF太!!

在Chrome, Opera，边缘问题解决得相当EZ

通过搜索带有伪类输入的元素:-webkit-autofill并执行所需的操作(在我的例子中，我更改输入包装器类以使用浮动标签模式更改标签位置)。

问题出在Firefox上

因为FF没有这样的伪类或类似的类(正如许多人建议的“:-moz-autofill”)，可以通过简单地搜索DOM来查看。你也找不到输入的黄色背景。唯一的原因是浏览器通过改变过滤器属性添加了这个黄色:

输入:-moz-autofill，输入:-moz-autofill-preview{过滤器:灰度(21%)亮度(88%)对比度(161%)反转(10%)黑褐色(40%)饱和(206%);｝

所以在Firefox的情况下，你必须首先搜索所有的输入，并得到它的计算风格，然后比较这个过滤器风格硬编码在浏览器设置。我真的不知道为什么他们不用简单的背景色，而是用那个奇怪的滤镜!?他们让生活更艰难了;)

下面是我的代码在我的网站(https://my.oodo.pl/en/modules/register/login.php):)上工作时的魅力

<script type="text/javascript">
/* 
 * this is my main function
 */
var checkAutoFill = function(){
    /*first we detect if we have FF or other browsers*/
    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    if (!isFirefox) {
        $('input:-webkit-autofill').each(function(){
        /*here i have code that adds "focused" class to my input wrapper and changes 
        info instatus div. U can do what u want*/
        $(this).closest('.field-wrapper').addClass('focused');
        document.getElementById("status").innerHTML = "Your browser autofilled form";
        });
    }
    if (isFirefox) {
        $('input').each(function(){
        var bckgrnd = window.getComputedStyle(document.getElementById(this.id), null).getPropertyValue("background-image");
        if (bckgrnd === 'linear-gradient(rgba(255, 249, 145, 0.5), rgba(255, 249, 145, 0.5))') {
        /*if our input has that filter property customized by browserr with yellow background i do as above (change input wrapper class and change status info. U can add your code here)*/
        $(this).closest('.field-wrapper').addClass('focused');
        document.getElementById("status").innerHTML = "Your Browser autofilled form";
        }
        })
    }
}
/*im runing that function at load time and two times more at 0.5s and 1s delay because not all browsers apply that style imediately (Opera does after ~300ms and so Edge, Chrome is fastest and do it at first function run)*/
checkAutoFill();
setTimeout(function(){ 
checkAutoFill();
}, 500);
setTimeout(function(){ 
checkAutoFill();
}, 1000);
})
</script>

我手动编辑了上面的代码，把一些对你不重要的垃圾扔出去。如果它不为你工作，比粘贴到你的IDE和双重检查语法;)当然，添加一些调试警报或控制台日志并进行自定义。

我也在找类似的东西。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>

在2020年，这是我在chrome中工作的方法:

// wait 0.1 sec to execute action after detecting autofill
// check if input username is autofilled by browser
// enable "login" button for click to submit form
 $(window).on("load", function(){
       setTimeout(function(){

           if ($("#UserName").is("input:-webkit-autofill")) 
           $("#loginbtn").prop('disabled', false); 

      }, 100);
 });

例如，为了检测电子邮件，我尝试了“on change”和突变观察者，但都不起作用。setInterval与LinkedIn自动填充一起工作得很好(不透露我所有的代码，但你知道的)，如果你在这里添加额外的条件来降低AJAX的速度，它与后端一起工作得很好。如果表单字段没有变化，比如他们没有输入来编辑他们的电子邮件，lastEmail会阻止毫无意义的AJAX ping。

// lastEmail needs scope outside of setInterval for persistence.
var lastEmail = 'nobody';
window.setInterval(function() { // Auto-fill detection is hard.
    var theEmail = $("#email-input").val();
    if (
        ( theEmail.includes("@") ) &&
        ( theEmail != lastEmail )
    ) {
        lastEmail = theEmail;
        // Do some AJAX
    }
}, 1000); // Check the field every 1 second

我为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>

WebKit浏览器的解决方案

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

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

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

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

CSS规则 JS钩