Solución:
El problema es que el autocompletar se maneja de manera diferente por diferentes navegadores. Algunos envían el evento de cambio, otros no. Por lo tanto, es casi imposible conectarse a un evento que se activa cuando el navegador autocompleta un campo de entrada.
-
Cambiar el activador de eventos para diferentes navegadores:
-
Para campos de nombre de usuario / contraseña:
- Firefox 4, IE 7 e IE 8 no envían el evento de cambio.
- Safari 5 y Chrome 9 envían el evento de cambio.
-
Para otros campos de formulario:
- IE 7 e IE 8 no envían el evento de cambio.
- Firefox 4 envía el evento de cambio de cambio cuando los usuarios seleccionan un valor de una lista de sugerencias y tabulan fuera del campo.
- Chrome 9 no envía el evento de cambio.
- Safari 5 envía el evento de cambio.
-
Sus mejores opciones son deshabilitar la función de autocompletar para un formulario usando autocomplete="off" en su formulario o encuesta a intervalos regulares para ver si está lleno.
Para su pregunta sobre si está completado en o antes del documento, ya está listo de nuevo, varía de un navegador a otro e incluso de una versión a otra. Para los campos de nombre de usuario / contraseña solo cuando selecciona un campo de contraseña de nombre de usuario está lleno. Entonces, en conjunto, tendría un código muy desordenado si intenta adjuntarlo a cualquier evento.
Puedes tener una buena lectura sobre esto AQUÍ
Solución para navegadores WebKit
De los documentos de MDN para : -webkit-autofill Pseudoclase CSS:
La pseudoclase: -webkit-autofill CSS coincide cuando un elemento tiene su valor autocompletado por el navegador
Podemos definir un vacío transición Regla CSS en el deseado <input> elemento una vez que es :-webkit-autofilled. JS podrá engancharse al animationstart evento.
Créditos para el equipo de Klarna UI. Vea su buena implementación aquí:
- Reglas CSS
- Gancho JS
Esto me funciona en las últimas versiones de Firefox, Chrome y Edge:
$('#email').on('blur input', function() {
....
});