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

Have you checked if the `change` event is triggered when the field is prefilled? — RoToRa, Oct 07 '11 at 10:02
Or check on document ready (or window load if necessary) if the field is filled? — RoToRa, Oct 07 '11 at 10:11

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

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

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

edited May 23 '17 at 12:19

Community

1
1

answered Oct 07 '11 at 14:47

Bart

6,694
6
43
53

yeah, I knew about about Interval and pending a lack of a non-hacky way to do it, I will pick your answer, but I was hoping there was a non-hacky way to do it – Serj Sagan Oct 08 '11 at 07:23
I found something on .bind to 'DOMAutoComplete' in that link that you give, but it did not work, so I am using the hacky version. Thanks for your help. – Serj Sagan Oct 08 '11 at 10:46

score 0 · Answer 2 · answered Aug 17 '12 at 16:53

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.

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

2 Answers2

Linked