Pregunta Detectando Autocompletar del navegador


¿Cómo se puede saber si un navegador ha llenado automáticamente un cuadro de texto? Especialmente con los cuadros de nombre de usuario y contraseña que se autocompletan alrededor de la carga de la página.

Mi primera pregunta es ¿cuándo ocurre esto en la secuencia de carga de la página? ¿Está 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 como esto:

if (autoFilled == true) {

} else {

}

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

Posibles duplicados

¿Evento DOM para autocompletar contraseña del navegador?

Eventos desencadenados por Autocompletar y JavaScript del navegador

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


114
2017-07-29 09:20


origen


Respuestas:


El problema es que el autocompletado se maneja de forma 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 desencadena cuando el navegador completa automáticamente un campo de entrada.

  • Cambiar desencadenador de evento para diferentes navegadores:

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

      1. Firefox 4, IE 7 e IE 8 no envían el evento de cambio.
      2. Safari 5 y Chrome 9 envían el evento de cambio.
    • Para otros campos de formulario:

      1. IE 7 e IE 8 no envían el evento de cambio.
      2. Firefox 4 distribuye el evento de cambio de cambio cuando los usuarios seleccionan un valor de una lista de sugerencias y tabulan fuera del campo.
      3. Chrome 9 no distribuye el evento de cambio.
      4. Safari 5 envía el evento de cambio.

Las 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 se completa en o antes de que se vuelva a preparar el documento, varía de navegador a navegador e incluso de versión a versión. Para campos de nombre de usuario / contraseña, solo cuando se selecciona un campo de contraseña de usuario se completa. Entonces, en conjunto, tendrías un código muy desordenado si intentas unirte a cualquier evento.

Puedes tener una buena lectura sobre esto AQUÍ


101
2017-07-29 15:07



Solución para navegadores WebKit

De los documentos de MDN para el : -webkit-autofill Pseudo-clase CSS:

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

Podemos definir un vacío transición css regla sobre el deseado <input> elemento una vez que es :-webkit-autofilled. JS luego podrá conectar el animationstart evento.

Créditos a la Interfaz de usuario de Klarna equipo. Vea su buena implementación aquí:


29
2018-01-08 06:35



En caso de que alguien esté buscando una solución (como lo era hoy), para escuchar un cambio de autocompletar del navegador, aquí hay un método jquery personalizado que he creado, solo para simplificar el proceso al agregar un detector de cambios a una entrada:

    $.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!");
});

14
2017-08-19 21:14



Para autocompletar Google Chrome, esto funcionó para mí:

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

11
2018-05-24 07:36



Esto funciona para mí en los últimos Firefox, Chrome y Edge:

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

11
2018-06-01 18:36



Hay un nuevo componente de relleno para solucionar este problema en github. Mira esto Autocompletar-evento. Solo necesita instalarlo y, listo, completar automáticamente funciona como se esperaba.

bower install autofill-event

6
2018-04-27 23:16



Lamentablemente, la única manera confiable que he encontrado para verificar este navegador cruzado es sondear la entrada. Para que sea receptivo, también escucha los eventos. Chrome ha comenzado a ocultar los valores de autocompletar de javascript que necesita un hack.

  • Encuesta cada medio a un tercio de segundo (No necesita ser instantáneo en la mayoría de los casos)
  • Dispare el evento de cambio usando JQuery luego haga su lógica en una función escuchando el evento de cambio.
  • Agregue una solución para los valores ocultos de contraseña de autocompletar de Chrome.

    $(document).ready(function () {
        $('#inputID').change(YOURFUNCTIONNAME);
        $('#inputID').keypress(YOURFUNCTIONNAME);
        $('#inputID').keyup(YOURFUNCTIONNAME);
        $('#inputID').blur(YOURFUNCTIONNAME);
        $('#inputID').focusin(YOURFUNCTIONNAME);
        $('#inputID').focusout(YOURFUNCTIONNAME);
        $('#inputID').on('input', YOURFUNCTIONNAME);
        $('#inputID').on('textInput', YOURFUNCTIONNAME);
        $('#inputID').on('reset', YOURFUNCTIONNAME);
    
        window.setInterval(function() {
            var hasValue = $("#inputID").val().length > 0;//Normal
            if(!hasValue){
                hasValue = $("#inputID:-webkit-autofill").length > 0;//Chrome
            }
    
            if (hasValue) {
                $('#inputID').trigger('change');
            }
        }, 333);
    });
    

6
2017-07-16 15:06



Mi solución:

Escucha a change eventos como lo haría normalmente, y en la carga de contenido DOM, haga esto:

setTimeout(function() {
    $('input').each(function() {
        var elem = $(this);
        if (elem.val()) elem.change();
    })
}, 250);

Esto disparará los eventos de cambio para todos los campos que no están vacíos antes de que el usuario tenga la oportunidad de editarlos.


4
2017-09-13 23:28



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

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

dónde inputBackgroundNormalState para mi plantilla es 'rgb (255, 255, 255)'.

Entonces, básicamente, cuando los navegadores aplican autocompletar, tienden a indicar que la entrada se autocompleta aplicando un color amarillo diferente (molesto) en la entrada.

Editar: funcionará para todos los navegadores


3
2018-05-31 09:24



Tengo la solución perfecta para esta pregunta, pruebe este fragmento de código.
Demo está aquí 

function ModernForm() {
    var modernInputElement = $('.js_modern_input');

    function recheckAllInput() {
        modernInputElement.each(function() {
            if ($(this).val() !== '') {
                $(this).parent().find('label').addClass('focus');
            }
        });
    }

    modernInputElement.on('click', function() {
        $(this).parent().find('label').addClass('focus');
    });
    modernInputElement.on('blur', function() {
        if ($(this).val() === '') {
            $(this).parent().find('label').removeClass('focus');
        } else {
            recheckAllInput();
        }
    });
}

ModernForm();
.form_sec {
  padding: 30px;
}
.form_sec .form_input_wrap {
  position: relative;
}
.form_sec .form_input_wrap label {
  position: absolute;
  top: 25px;
  left: 15px;
  font-size: 16px;
  font-weight: 600;
  z-index: 1;
  color: #333;
  -webkit-transition: all ease-in-out 0.35s;
  -moz-transition: all ease-in-out 0.35s;
  -ms-transition: all ease-in-out 0.35s;
  -o-transition: all ease-in-out 0.35s;
  transition: all ease-in-out 0.35s;
}
.form_sec .form_input_wrap label.focus {
  top: 5px;
  color: #a7a9ab;
  font-weight: 300;
  -webkit-transition: all ease-in-out 0.35s;
  -moz-transition: all ease-in-out 0.35s;
  -ms-transition: all ease-in-out 0.35s;
  -o-transition: all ease-in-out 0.35s;
  transition: all ease-in-out 0.35s;
}
.form_sec .form_input {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border: none;
  border-bottom: 2px solid #d3d4d5;
  padding: 30px 0 5px 0;
  outline: none;
}
.form_sec .form_input.err {
  border-bottom-color: #888;
}
.form_sec .cta_login {
  border: 1px solid #ec1940;
  border-radius: 2px;
  background-color: #ec1940;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  padding: 15px 40px;
  margin-top: 30px;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="form_sec">
    <div class="row clearfix">
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                Full Name
            </label>
            <input type="text" name="name" id="name" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group form_input_wrap col-lg-6 col-md-6">
            <label>
                Emaill
            </label>
            <input type="email" name="email" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group form_input_wrap col-lg-12 col-md-12">
            <label>
                Address Line 1
            </label>
            <input type="text" name="address" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                City
            </label>
            <input type="text" name="city" class="form_input js_modern_input">
        </div>
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                State
            </label>
            <input type="text" name="state" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                Country
            </label>
            <input type="text" name="country" class="form_input js_modern_input">
        </div>
        <div class="form-group col-lg-4 col-md-4 form_input_wrap">
            <label>
                Pin
            </label>
            <input type="text" name="pincode" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row cta_sec">
        <div class="col-lg-12">
            <button type="submit" class="cta_login">Submit</button>
        </div>
    </div>
</form>


2
2018-06-26 09:54



En Chrome, puede detectar campos de autocompletar por configuración una regla CSS especial para elementos autocompletados, y luego verificar con javascript si el elemento tiene aplicada esa regla.

Ejemplo:

CSS

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

JavaScript

  let css = $("#selector").css("box-shadow")
  if (css.match(/inset/))
    console.log("autofilled:", $("#selector"))

2
2018-06-09 01:43