Chrome (pero no Firefox) autocompletar texto de etiqueta superpuesto a pesar de jquery

Question

He hecho un formulario de inicio de sesión que contiene las etiquetas de 'nombre de usuario' y 'contraseña', con el siguiente jquery utilizado para ocultar las etiquetas una vez que el usuario se centra en el campo.

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

}); 

y el 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> 

El problema es que autocompletar de cromo parece estar cargando el nombre de usuario y contraseña antes de que este scrip puede cogerlo, dándome texto extraña superposición hasta que enfocar manualmente en él . Esto es no un problema con Firefox. Pic: http://imgur.com/kJRLa

¿Alguna sugerencia sobre cómo solucionar esto para que los datos autocompletados hagan que las etiquetas se oculten?

Answer 1

Chrome (y, de forma equivalente, Autocompletar de Google Toolbar en otros navegadores) es un mal ciudadano de la web con su comportamiento de llenado de formularios. Cuando rellena campos de formulario, no activa los eventos normales. Si no desea deshabilitar la función de autocompletar, puede configurar un evento programado que verifique periódicamente si se ha producido el autocompletado.

La primera respuesta (por el asker de pregunta) de this SO question es una solución de ejemplo.

Answer 2

Después de leer Benjamin Miles tutorial Noté que puede detectar cromos de relleno automático con jQuery, así:

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

Observe que debe colocar el código en $(window).load(function(){});

y no

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

Answer 3

Usted podría también use el siguiente

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

Después de 5 milisegundos, se ejecuta el código y la etiqueta se oculta.