Javascript 浏览器密码自动填充的DOM事件？

在我正在构建的网站上，我有一个相当标准的用户名/密码输入框。密码框顶部有一个包含“password”的div，设置为

display:none聚焦或单击

这非常有效，直到用户要求浏览器记住密码：在这种情况下，您可以在附带的屏幕截图中看到这种情况

然后我的问题是：是否有一个我可以绑定的事件，当密码字段自动填充时会触发该事件，以便我可以隐藏帮助div？
下面是我提出的糟糕的解决方案：

我向站点添加了一个间隔计时器，用于检查框的值，并在值不是空字符串时隐藏帮助文本。
为什么不验证document.ready事件和每个usernametextfield.onchange事件上是否填写了密码文本框？这样你就不需要定时器了，它应该是正确的

注意：在浏览器填写密码字段之前，onchange事件可能会被触发（我还没有对此进行测试）。要处理短时间跨度，可以在100毫秒后使用setTimeOut启动检查。
我使用用户名上的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）
也许我的jquery解决方案会引起您的注意：）。
以下是我为解决方案所做的工作：

$('form input').bind('change', function(){
    $('form').find('input').each(function(){
      label = $(this).prev('label');
      if($(this).val()!==''){
        label.addClass('active');
      }
    });
});

首先，我将
change
事件与输入字段绑定，因此，当其中一个输入字段发生更改时，我将执行下一步，即测试所有输入字段，其中任何一个字段的值都已更改，然后使用它进行我想要的操作

欲了解更多信息=>
对于chrome:-webkit自动填充类非常有效。
对于独立于浏览器的解决方案，只要鼠标悬停在浏览器的“自动填充”下拉列表上，就会触发mouseleave事件。您可以在输入、其父元素或事件窗口上编写处理程序。请参阅下面的代码

在HTML中：

<div id="banner-message">  
    <div>
        <input type="text" id="name" name="name" placeholder="name"/> 
    </div>
    <div>
        <input type="text" id="email" name="email" placeholder="email"/> 
    </div>
    <div>
        <input type="password" name="password" placeholder="password"/> 
    </div>
</div>
<div id="event-log"> </div>

在上面的代码中，当触发事件时，event.target是指针离开并输入下拉列表的元素。
这里需要注意的一点是，您必须确定检测mouseleave的正确方法，mouseleave只有在自动填充时才会触发。上述解决方案对我很有效

看这把小提琴：

在尝试上述解决方案之前，请将您的浏览器配置为自动填充。
通常，在您填充/选择用户名之前，密码不会自动填充。自动填充发生时，用户名文本字段上的更改不会触发，但会在文本字段失去焦点时触发。自动填充可以发生两次：1.加载DOM时（document.ready（））2。当用户手动在用户名文本字段中输入新值时。现在最好使用占位符来解决。
var banner = $("#banner-message")
var eventlog = $("#event-log");
var inputs = $("input");

//Following event fired when hovered over autofill dropdown, 
banner.on("mouseleave", function(event) { 
    var targetid = event.target.id;  
    eventlog.html('Source id::'+targetid);
});