How to bind to browser change of input field? (jQuery)

Question

Please take a look at this: 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();
});

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

Answer 1

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

• FireFox capture autocomplete input change event
• http://bugs.jquery.com/ticket/7830

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.

Something like this...

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

Answer 2

I had the same issue. None of the solutions I found worked nicely enough. I ended up with this:

If it doesn't matter that your input fields have a background, I handled it just in CSS.

jsfiddle

I just gave the .inputPlaceholder { z-index: -1; } so that it aligned behind the input field and then set the input { background: transparent; } so you could see the div behind it.

Google's default -webkit-autofill style has a yellow background, so that just covers up your placeholder behind it all. No need to mess around with custom plugins/events/setIntervals.