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

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 t开发者_开发问答hat autofilled data causes the labels to hide?

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(){}) 

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.

You can try injecting a placeholder attribute from controller like this

setTimeout(function() {
function compile(element) {
    var el = angular.element(element);
    $scope = el.scope();
    $injector = el.injector();
    $injector.invoke(function($compile) {
        $compile(el)($scope)
    })
}
var elem = document.querySelectorAll(':-webkit-autofill');
for (i = 0; i < elem.length; ++i) {
    elem[i].setAttribute("placeholder", "");
    compile(elem);
}}, 500);

You could also use the following

var wait = window.setTimeout( function(){
//Pseduo code
label.style.display = "none";
},5);

After 5 milliseconds the code is executed and the label gets hidden.

input:-webkit-autofill Add required styles for -webkit-autofill properties to fix the overlapping issue.