Détection du remplissage automatique du navigateur

Question

Comment savoir si un navigateur a rempli automatiquement une zone de texte ? En particulier avec les champs de nom d'utilisateur et de mot de passe qui se remplissent automatiquement au moment du chargement de la page.

Ma première question est la suivante : quand cela se produit-il dans la séquence de chargement de la page ? Est-ce avant ou après document.ready ?

Deuxièmement, comment puis-je utiliser la logique pour savoir si cela s'est produit ? Ce n'est pas que je veuille l'empêcher de se produire, je veux juste m'accrocher à l'événement. De préférence, quelque chose comme ceci :

if (autoFilled == true) {

} else {

}

Si possible, j'aimerais voir un jsfiddle montrant votre réponse.

Duplicatas possibles

Événement DOM pour le remplissage automatique du mot de passe dans le navigateur ?

Autofill du navigateur et événements déclenchés par Javascript

--Ces deux questions n'expliquent pas vraiment quels événements sont déclenchés, elles se contentent de revérifier continuellement la zone de texte (ce qui n'est pas bon pour les performances !).

Answer 1

Le problème est que le remplissage automatique est géré différemment par les différents navigateurs. Certains envoient l'événement de modification, d'autres non. Il est donc presque impossible de s'accrocher à un événement qui est déclenché lorsque le navigateur remplit automatiquement un champ de saisie.

• Changez le déclencheur d'événement pour les différents navigateurs :

  • Pour les champs nom d'utilisateur/mot de passe :

    1. Firefox 4, IE 7 et IE 8 n'envoient pas l'événement de changement.
    2. Safari 5 et Chrome 9 envoient l'événement de changement.

  • Pour les autres champs de formulaire :

    1. IE 7 et IE 8 n'envoient pas l'événement de changement.
    2. Firefox 4 envoie l'événement de modification lorsque les utilisateurs sélectionnent une valeur dans une liste de suggestions et quittent le champ avec la touche de tabulation.
    3. Chrome 9 n'envoie pas l'événement de modification.
    4. Safari 5 envoie l'événement de changement.

La meilleure solution consiste à désactiver la saisie semi-automatique pour un formulaire à l'aide de la commande autocomplete="off" dans votre formulaire ou sondage à intervalles réguliers pour voir s'il est rempli.

Pour ce qui est de savoir si les champs sont remplis avant ou après le fichier document.ready, cela varie d'un navigateur à l'autre et même d'une version à l'autre. Pour les champs nom d'utilisateur/mot de passe, le champ mot de passe n'est rempli que lorsque vous sélectionnez un nom d'utilisateur. En somme, vous obtiendrez un code très désordonné si vous essayez de l'attacher à un événement.

Vous pouvez lire ce qui suit ICI

Answer 2

Juste au cas où quelqu'un cherche une solution (comme je l'ai fait aujourd'hui), pour écouter un changement de remplissage automatique du navigateur, voici une méthode jquery personnalisée que j'ai construite, juste pour simplifier le processus d'ajout d'un écouteur de changement à une entrée :

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

Vous pouvez l'appeler comme ça :

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

Answer 3

Malheureusement, la seule façon fiable que j'ai trouvée pour vérifier cela dans les différents navigateurs est d'interroger l'entrée. Pour le rendre réactif, il faut également écouter les événements. Chrome a commencé à cacher les valeurs de remplissage automatique du javascript, ce qui nécessite un hack.

• Sondage toutes les demi-secondes ou tous les tiers de secondes (dans la plupart des cas, il n'est pas nécessaire que le sondage soit instantané).
• Déclenchez l'événement de changement à l'aide de JQuery, puis faites votre logique dans une fonction qui écoute l'événement de changement.

• Ajout d'un correctif pour les valeurs de mot de passe cachées du remplissage automatique 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);
  });

Answer 4

Ma solution :

Ecoutez change comme vous le feriez normalement, et lors du chargement du contenu du DOM, faites ceci :

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

Cela déclenchera les événements de modification pour tous les champs qui ne sont pas vides avant que l'utilisateur ait eu la possibilité de les modifier.

Answer 5

Il existe un nouveau composant polyfill pour résoudre ce problème sur github. Jetez un coup d'œil à autofill-event . Il suffit de l'installer et voilà, le remplissage automatique fonctionne comme prévu.

bower install autofill-event