如何绑定到浏览器输入字段的更改？ （jQuery）

Question

请看一下这个： http://jsfiddle.net/sduBQ/1/

Html：

<form action="login.php" method="post" id="login-form">
    <div class="field">
        <input name="email" id="email" type="text" class="text-input" value="E-mail" />
    </div>

    <div class="field">
        <input name="code" id="code" type="password" class="text-input" />
        <div id='codetip'>Access Code</div>
        <label class="error" for="code" id="code_error"></label>
    </div>
    <br />
    <div class="container">
        <a id="submit" class="link-2">Access</a>
     </div>
</form>

CSS：

a {
    border: solid 1px #777;
    padding:5px;
}
#codetip {
    position:absolute;
    margin-top:-20px;
    margin-left:5px;
}

Javascript：

$('#email').focus(function(){
    if($(this).val()=='E-mail'){$(this).val('');}
});
$('#email').blur(function(){
    if($(this).val()==''){$(this).val('E-mail');}
});

$('#code').focus(function(){
    $('#codetip').hide();
});
$('#code').blur(function(){
    if($(this).val()==''){$('#codetip').show();}
});

$('#codetip').click(function(){
    $(this).hide();
    $('#code').focus();
});

$('#submit').click(function(){
    $(this).submit();
});

问题是至少在 Chrome 中（尚未尝试过其他浏览器），Chrome 密码管理器会保存您的密码，并在您选择电子邮件时为您预填充密码。我使用 jquery 隐藏/显示密码输入字段顶部的 div 作为标签，当用户单击密码字段时隐藏该 div（如上面的 jsfiddle 代码所示）。我需要知道如何在 Chrome 预填充密码字段时隐藏该 div...

Answer 1

我自己还没有遇到过这个问题，但根据一些快速的谷歌搜索，这似乎是一个常见问题。

• FireFox 捕获自动完成输入更改事件
• http://bugs.jquery.com/ticket/7830

您可以做的一个简单的技巧是设置一些运行的代码每隔一两秒通过 setInterval 进行检查，并检查该字段是否有值。

像这样的东西...

var code = $('#code');
var codeTip = $('#codetip');
var interval = setInterval(function(){
    if (code.val()!=''){
        codeTip.hide();
        clearInterval(interval);
    }
}, 1000);

Answer 2

我有同样的问题。我发现的解决方案都不够好。我最终的结论是：

如果你的输入字段有背景并不重要，我只是在 CSS 中处理它。

jsfiddle

我刚刚给出了 .inputPlaceholder { z-index: -1 ; } 使其在输入字段后面对齐，然后设置 input { background:transparent; } 这样你就可以看到它后面的div。

Google 的默认 -webkit-autofill 样式具有黄色背景，因此只会掩盖其后面的占位符。无需搞乱自定义插件/事件/setIntervals。