Automatyczne uzupełnianie w Chrome (ale nie w Firefoksie) zachodzi na nakładanie się tekstu etykiety pomimo jquery

Question

Zrobiłem formularz logowania, który zawiera etykiety "nazwa użytkownika" i "hasło", a poniżej jquery służy do ukrywania etykiet, gdy użytkownik skupi się na pole.

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

}); 

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

Problemem jest to, że autouzupełniania Chrome wydaje się ładuje nazwy użytkownika i hasła przed tym scrip można go złapać, dając mi dziwnie nakładającą tekst aż ręcznie skupić się na niej . To jest , a nie problem z Firefoksem. Pic: http://imgur.com/kJRLa

Wszelkie sugestie, jak to naprawić, aby automatycznie wypełnione dane powodowały ukrywanie etykiet?

Answer 1

Chrome (i, podobnie, funkcja automatycznego wypełniania paska narzędzi Google w innych przeglądarkach) jest złym obywatelem internetu z zachowaniem wypełniania formularzy. Wypełniając pola formularza, nie wywołuje normalnych zdarzeń. Jeśli nie chcesz wyłączać autouzupełniania, możesz skonfigurować zdarzenie czasowe, które okresowo sprawdza, czy wystąpiło autouzupełnianie.

Pierwsza odpowiedź (przez pytającego) z this SO question jest jednym z przykładowych rozwiązań.

Answer 2

Po przeczytaniu Benjamin Miles tutorial Zauważyłem można wykryć chromes autofill z jQuery tak:

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

Pamiętaj, że musisz umieścić kod w $(window).load(function(){});

i nie

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

Answer 3

Mogłabyś również użyj następującego

Po 5 milisekundach kod zostaje wykonany, a etykieta zostaje ukryta.