如何绑定到输入字段的浏览器更改?(jQuery)

2022-01-22 00:00:00 events passwords jquery javascript

请看一下: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:

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...

The problem is that at least in Chrome(haven't tried other browsers yet) when the Chrome Password Manager saves your password and prefills the password for you when you pick the email. I use jquery to hide/show a div over the top of the password input field as a label, hiding that div when the user clicks into the password field (as can be seen in the above jsfiddle code). I need to know how to hide that div when Chrome prefills the password field...

推荐答案

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

I've haven't run into this myself, but it appears to be a common issue, based on a few quick Google Searches.

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

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

One easy hack you could do is set up some code that runs every second or two via setInterval, and checks to see if the field has a value.

这样的……

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

相关文章