Detecting Chrome Saved Input Information with Jquery?

I'm using jquery to develop placeholder text over an input that fades slightly when the input gets focus, and disappears completely when the users types. This part works fine. So, to avoid a conflict with saved text, I wrapped 开发者_运维知识库the code in:

if(!$($input).val()) {

...create placeholder, set up rules for fading it, etc...

}

If the user has a saved password for example, in Firefox, the browser will detect that the input has a value and then not create the placeholder text.

In Chrome, however, Chrome does not load the saved value until after the page is 'done' loading... which means it detects that the input is empty, creates the placeholder text, and then after the page is loaded, places the saved value in the input--leading to the placeholder and the password being on top of each other.

How can I detect Chrome filling out the form to avoid this unfortunate overlap?

---

In the end, I noticed that Chrome doesnt trigger any sort of event upon autofilling, but if you wait until window.load and then check if any input has -webkit-autofill you can check them then. As you can see I'm also using a debouncer (Ben Alman - http://benalman.com/projects/jquery-throttle-debounce-plugin/) to wait a further 200 milliseconds as even after window.load it sometimes hasn't put in the autofill text yet...

$(window).load($.debounce(200, function () {

       if ($('input:-webkit-autofill')) {

           // We know that this form has autofill on its way. Let's check this again after a delay as its not always done on window.load

           $('input:-webkit-autofill').each(function () {

               if ($(this).val() !== "") {
                   $(this).parent().find('label').hide();
               }

           });

       }

    }));

---

I don't know when exactly Chrome autofill run, but inside

$('input, select').on('focusin', function(evt) {...});

I receive autofilled values for all fields already.

(For me this is enough to test for "dirty" forms, ie. forms with changed values compared to original values.)

---

To remove the browser saved information you can use the attribute autocomplete="off" within the form input.