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

Question

我正在建立的网站上有一个相当标准的用户名/密码输入框。密码框有一个div，其上面叠加了“密码”，在焦点或点击时设置为display: none;。

这很有用，直到用户要求他们的浏览器记住密码：在这种情况下，您可以最终得到附加屏幕截图中的情况。

我的问题是：是否有一个我可以绑定的事件，当密码字段自动填充时会触发，因此我可以隐藏帮助div？

Answer 1

这是我提出的糟糕解决方案：

我在网站上添加了一个间隔计时器，用于检查框的值，并在值不是空字符串时隐藏帮助文本。

Answer 2

为什么不验证document.ready事件和每个usernametextfield.onchange事件上是否填写了密码文本框？这样你就不需要计时器，它应该是正确的。

注意：可能（我还没有测试过）在浏览器填写密码字段之前会触发onchange事件。要处理这么短的时间跨度，您可以使用setTimeOut在几百毫秒后启动检查。

Answer 3

我在用户名上使用了模糊事件来检查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）

Answer 4

也许我的jquery解决方案会引起你的注意:)。 这就是我为解决方案所做的：

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

首先，我将change事件与输入字段绑定，这样当其中一个输入字段发生变化时，我会执行下一步测试所有输入字段，其中任何一个都改变了值，然后我想要的是我想要的用它

更多说明=＆gt; JSFIDDLE

Answer 5

对于chrome：-webkit-autofill类可以完美地工作。 对于我发现的与浏览器无关的解决方案，只要将鼠标悬停在浏览器的自动填充下拉菜单上，就会触发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>

在jQuery中：

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

在上面的代码中，当触发事件时，event.target是元素，指针从该元素离开并进入下拉菜单。 这里要注意的一件事是，您必须找到正确的方法来检测仅在自动填充时才触发的mouseleave。以上解决方案对我有用。

查看此小提琴：https://jsfiddle.net/nilesh_ramteke/nt7a1ruw/20/

在尝试上述解决方案之前，请配置浏览器以自动填充。