Búsqueda de sitios web

javascript - Detectando el autocompletado del navegador

¿Cómo puedes saber si un navegador ha autocompletado un cuadro de texto? Especialmente con los cuadros de nombre de usuario y contraseña que se autocompletan al cargar la página.

Mi primera pregunta es, ¿cuándo ocurre esto en la secuencia de carga de la página? ¿Es antes o después de document.ready?

En segundo lugar, ¿cómo puedo usar la lógica para averiguar si esto ocurrió? No es que quiera evitar que esto ocurra, solo engancharme al evento. Preferiblemente algo así:

if (autoFilled == true) {

} else {

}

Si es posible, me encantaría ver un jsfiddle que muestre tu respuesta.

Posibles duplicados

¿Evento DOM para el autocompletado de contraseñas del navegador?

Autocompletar del navegador y eventos desencadenados por Javascript

--Ambas preguntas no explican realmente qué eventos se activan, solo vuelven a comprobar continuamente el cuadro de texto (¡no es bueno para el rendimiento!).

Respuesta #1

El problema es que el autocompletado se maneja de manera diferente según el navegador. Algunos disparan el evento de cambio, otros no. Por lo tanto, es casi imposible engancharse a un evento que se active cuando el navegador autocompleta un campo de entrada.

  • Cambiar el activador de eventos para diferentes navegadores:

    • Para los campos de nombre de usuario/contraseña:

      1. Firefox 4, IE 7 y IE 8 no disparan el evento change.
      2. Safari 5 y Chrome 9 sí disparan el evento change.

    • Para otros campos del formulario:

      1. IE 7 e IE 8 no disparan el evento change.
      2. Firefox 4 sí dispara el evento de cambio cuando los usuarios seleccionan un valor de una lista de sugerencias y presionan tab para salir del campo.
      3. Chrome 9 no dispara el evento change.
      4. Safari 5 sí dispara el evento change.

Tus mejores opciones son desactivar la autocompletación para un formulario usando autocomplete="off" en tu formulario o revisar a intervalos regulares para ver si está llenado.

Con respecto a su pregunta sobre si se llena en o antes de document.ready, nuevamente 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 nombre de usuario o contraseña se llena. Así que en general, tendría un código muy desordenado si intenta adjuntarse a cualquier evento.

Puedes leer bien esto AQUÍ

Respuesta #2

Solución para navegadores WebKit

De los documentos de MDN sobre la pseudo-clase CSS :-webkit-autofill:

La pseudo-clase CSS :-webkit-autofill coincide cuando un elemento tiene su valor autocompletado por el navegador

Podemos definir una regla CSS de transition vacía en el <input> deseado una vez que esté :-webkit-autofilled. Luego, JS podrá engancharse al evento animationstart.

Créditos al equipo de interfaz de usuario de Klarna. Mira su buena implementación aquí:

  • Reglas de CSS
  • hook de JS

Respuesta #3

Estaba leyendo mucho sobre este tema y quería proporcionar una solución rápida que me ayudó.

let style = window.getComputedStyle(document.getElementById('email'))
  if (style && style.backgroundColor !== inputBackgroundNormalState) {
    this.inputAutofilledByBrowser = true
  }

donde inputBackgroundNormalState para mi plantilla es 'rgb(255, 255, 255)'.

Entonces, básicamente, cuando los navegadores aplican el autocompletado, tienden a indicar que el campo está autocompletado aplicando un color amarillo diferente (molesto) en el campo.

Editar: esto funciona para todos los navegadores

Respuesta #4

Esto funciona para mí en las últimas versiones de Firefox, Chrome y Edge:

$('#email').on('blur input', function() {
    ....
});

Respuesta #5

Para la autocompletación de Google Chrome, esto me funcionó:

if ($("#textbox").is(":-webkit-autofill")) 
{    
    // the value in the input field of the form was filled in with google chrome autocomplete
}

Respuesta #6

Por si alguien está buscando una solución (tal como yo hoy), para escuchar un cambio de autocompletado del navegador, aquí hay un método personalizado de jQuery que he creado, solo para simplificar el proceso al agregar un listener de cambio a un input:

    $.fn.allchange = function (callback) {
        var me = this;
        var last = "";
        var infunc = function () {
            var text = $(me).val();
            if (text != last) {
                last = text;
                callback();
            }
            setTimeout(infunc, 100);
        }
        setTimeout(infunc, 100);
    };

Puedes llamarlo así:

$("#myInput").allchange(function () {
    alert("change!");
});

Respuesta #7

También enfrenté el mismo problema donde la etiqueta no detectaba el autocompletado y la animación para mover la etiqueta al rellenar el texto se superponía, y esta solución funcionó para mí.

input:-webkit-autofill ~ label {
    top:-20px;
}

Artículos relacionados