Chrome (but not Firefox) autofill is overlapping label text despite jquery

Question

I've made a login form which contains the labels for 'username' and 'password', with the below jquery used to hide the labels once the user focuses on the field.

$(document).ready(function(){

 $("form.login input")
  .bind("focus.labelFx", function(){
   $(this).prev().hide();
  })
  .bind("blur.labelFx", function(){
   $(this).prev()[!this.value ? "show" : "hide"]();
  })
  .trigger("blur.labelFx");

});

and the html:

<form method="post" id="login-form" action="/accounts/login/">
    <div class="input-wrapper">
        <label for="id_username">Username</label>
        <input id="id_username" size="30" type="text" name="username">
    </div>
</form>

The problem is that chrome's autocomplete appears to be loading the username and password before this scrip can catch it, giving me strangely overlapping text until I manually focus on it. This is not a problem with Firefox. Pic: http://imgur.com/kJRLa

Any suggestions on how to fix this so that autofilled data causes the labels to hide?

Answer 1

After reading Benjamin Miles tutorial I noticed you can detect chromes autofill with jquery like so:

$(window).load(function(){
   if($('input:-webkit-autofill')){
      //Remove Label Function
   }        
});

Note that you must place the code in $(window).load(function(){});

and not

$(document).ready(function(){}) 

Answer 2

Chrome (and, equivalently, Google Toolbar's Autofill on other browsers) is a bad citizen of the web with its form filling behavior. When it fills in form fields, it does not fire the normal events. If you don't wish to disable autofill, you can set up a timed event which periodically checks to see if autofill has occurred.

The first answer (by the question asker) of this SO question is one example solution.