我花了几个小时解决的问题，检测自动填充输入在第一页加载(没有任何用户采取行动)，并发现理想的解决方案，工作在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和双重检查语法;)当然，添加一些调试警报或控制台日志并进行自定义。

问题是不同的浏览器处理自动填充的方式不同。有些调度变更事件，有些则不调度。因此，当浏览器自动完成一个输入字段时，几乎不可能钩到一个事件。

更改不同浏览器的事件触发器: 对于用户名/密码字段: Firefox 4、IE 7和IE 8不分派更改事件。 Safari 5和Chrome 9会分派更改事件。 对于其他表单字段: ie7和ie8不分派变更事件。 当用户从建议列表中选择一个值并从字段中选择tab时，Firefox 4会分派change change事件。 Chrome 9不会分派更改事件。 Safari 5确实分派了更改事件。

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

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

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

我遇到过同样的问题，我已经写出了这个解。

当页面加载时，它开始对每个输入字段进行轮询(我设置了10秒，但您可以调优这个值)。 10秒后，它将停止对每个输入字段的轮询，只对集中的输入(如果有的话)开始轮询。 当你模糊输入时，它会停止，如果你聚焦一个，它又会开始。

通过这种方式，您只在真正需要时轮询，并且只对有效输入进行轮询。

// This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
    $("input").each(function() {
        if ($(this).val() !== $(this).attr("value")) {
            $(this).trigger("change");
        }
    });
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
    clearInterval(loading);
}, 10000);
// Now we just listen on the focused inputs (because user can select from the autofill dropdown only when the input has focus)
var focused;
$(document)
.on("focus", "input", function() {
    var $this = $(this);
    focused = setInterval(function() {
        if ($this.val() !== $this.attr("value")) {
            $this.trigger("change");
        }
    }, 100);
})
.on("blur", "input", function() {
    clearInterval(focused);
});

当自动插入多个值时，它的工作效果不太好，但可以对它进行调整，查找当前表单上的每个输入。

喜欢的东西:

// This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
    $("input").each(function() {
        if ($(this).val() !== $(this).attr("value")) {
            $(this).trigger("change");
        }
    });
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
    clearInterval(loading);
}, 10000);
// Now we just listen on inputs of the focused form
var focused;
$(document)
.on("focus", "input", function() {
    var $inputs = $(this).parents("form").find("input");
    focused = setInterval(function() {
        $inputs.each(function() {
            if ($(this).val() !== $(this).attr("value")) {
                $(this).trigger("change");
            }
        });
    }, 100);
})
.on("blur", "input", function() {
    clearInterval(focused);
});

If you only want to detect whether auto-fill has been used or not, rather than detecting exactly when and to which field auto-fill has been used, you can simply add a hidden element that will be auto-filled and then check whether this contains any value. I understand that this may not be what many people are interested in. Set the input field with a negative tabIndex and with absolute coordinates well off the screen. It's important that the input is part of the same form as the rest of the input. You must use a name that will be picked up by Auto-fill (ex. "secondname").

var autofilldetect = document.createElement('input');
autofilldetect.style.position = 'absolute';
autofilldetect.style.top = '-100em';
autofilldetect.style.left = '-100em';
autofilldetect.type = 'text';
autofilldetect.name = 'secondname';
autofilldetect.tabIndex = '-1';

将此输入附加到表单，并在表单提交时检查其值。

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

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

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

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