Автозаполнение Chrome (но не Firefox) перекрывает текст метки, несмотря на jquery

Question

Я создал форму входа в систему, которая содержит метки для «имени пользователя» и «пароля», с помощью jquery ниже, чтобы скрыть метки, как только пользователь сфокусируется на поле.

$(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");

});

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

Проблема в том, что автозаполнение chrome загружает имя пользователя и пароль до того, как этот скрипт сможет его перехватить, давая мне странно перекрывающийся текст, пока я не сфокусируюсь на нем вручную.Это не проблема с Firefox.Pic: http://imgur.com/kJRLa

Есть предложения, как это исправить, чтобы при автозаполнении метки скрывались?

Answer 1

Chrome (и, что то же самое, автозаполнение панели инструментов Google в других браузерах) является плохим гражданином Интернета с его поведением заполнения формы.Когда он заполняет поля формы, он не запускает обычные события.Если вы не хотите отключать автозаполнение, вы можете настроить временное событие, которое периодически проверяет, не произошло ли автозаполнение.

Первый ответ (задающий вопрос) на этот вопрос SO является одним из примеров решения.

Answer 2

После прочтения учебника Бенджамина Майлза Я заметил, что вы можете обнаружить автозаполнение хромов с помощью jquery, например:

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

Обратите внимание, что вы должны поместить код в $(window).load(function(){});

а не

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

Answer 3

Вы также можете использовать следующие

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

Через 5 миллисекунд код выполняется и метка скрывается.