web-dev-qa-db-fra.com

Désactivation par programme Chrome remplissage automatique

Il y a des discussions à ce sujet sur Internet (en particulier ici sur le débordement de pile), mais une grande partie date d'environ 2015, donc je me demandais si quelqu'un avait une expérience récente.

Nous utilisons un widget JavaScript pour activer la fonctionnalité de recherche de type anticipé sur les formulaires Web, mais cette interface utilisateur est systématiquement recouverte de la saisie automatique Chrome.

Tandis que autocomplete=“off” fonctionnait auparavant, Chrome semble ignorer cette valeur maintenant et afficher l'interface utilisateur de toute façon. La seule chose que je puisse trouver qui fonctionne avec Chrome 66/67 sur OSX est une valeur non valide, telle que autocomplete=“blah”. Cela semble cependant trop sommaire, et nous l'avons déjà expérimenté et il est ignoré dans certaines situations/versions Chrome.

Quelqu'un at-il aimé un moyen fiable de désactiver cela en utilisant HTML/Javascript?

En remarque - il semble que même Google ne peut pas le désactiver en cas de besoin, car leur propre widget de saisie anticipée de Google Maps est superposé par la saisie automatique Chrome Chrome. Cela peut être vu sur la plupart des Magasins Shopify.

javascripthtmlgoogle-chrome
10
HenrikV

jquery.disable-autofill

Désactivez le remplissage automatique de Chrome. Pratique pour les formulaires CRUD, lorsque vous ne souhaitez pas que les entrées de nom d'utilisateur/mot de passe soient remplies automatiquement par le navigateur.

Usage:

<form>
  <input type="input" name="username" autofill="off" autocomplete="off">
  <input type="password" name="password"  autofill="off" autocomplete="off">
</form>

<script src="jquery.disable-autofill.js"></script>
<script>
  $('input[autofill="off"]').disableAutofill();
</script>

https://github.com/biesbjerg/jquery.disable-autofill

11
mohammed hekal

Vous pouvez simplement mettre autocomplete = "new-password" dans votre champ de mot de passe et c'est tout. Cela devrait très bien fonctionner!

8
Evading Shadows

autocomplete="off" ne fonctionne plus . La seule chose qui fonctionne depuis 2019 est autocomplete="new-password"

Consultez ce lien sur Chromium Project https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

Ajoutez un attribut de saisie semi-automatique avec une valeur de nom d'utilisateur pour les noms d'utilisateur.

Si vous avez implémenté un flux de connexion "e-mail d'abord" qui sépare le nom d'utilisateur et le mot de passe en deux formulaires distincts, incluez un champ de formulaire contenant le nom d'utilisateur dans le formulaire utilisé pour collecter le mot de passe. Vous pouvez bien sûr masquer ce champ via CSS si cela convient à votre mise en page.

Ajoutez un attribut de saisie semi-automatique avec une valeur de current-password pour le champ de mot de passe sur un formulaire de connexion.

Ajoutez un attribut de saisie semi-automatique avec une valeur de nouveau-mot de passe pour le champ de mot de passe sur les formulaires d'inscription et de changement de mot de passe.

Si vous demandez à l'utilisateur de taper son mot de passe deux fois lors de l'inscription ou de la mise à jour du mot de passe, ajoutez l'attribut de saisie semi-automatique du nouveau mot de passe dans les deux champs.

<form id="login" action="signup.php" method="post">
  <input type="text" autocomplete="new-password">
  <input type="password" autocomplete="new-password">
  <input type="submit" value="Sign Up">
</form>
5
Hari Das

Travaille pour moi

  <input [name]="nameControl" type="text" autocomplete="new-password">

dans le composant:

  this.nameControl = "name" + this.getRandomInt();

  getRandomInt() {
    return Math.floor(Math.random() * Math.floor(100));
  }
1
Rinat

Utilisation de jQuery en septembre 2019. La seule chose proche de la cohérence que j'ai obtenue pour désactiver la saisie semi-automatique/remplissage automatique sur un formulaire entier:

$('.disable-autofill').focus(function () {
    $(this).attr('autocomplete', 'new-password');
});
$('.disable-autofill').blur(function () {
    $(this).removeAttr('autocomplete');
});

Appliquez ensuite la classe à vos entrées, par exemple:

<input name="first_name" class="disable-autofill">

Vous devez supprimer l'attribut car si trop d'entrées ont autocomplete alors chrome recommence à l'ignorer :)

0
kdion4891

Pas une sollution très élégante mais ça marche. Le remplissage automatique se déclenche sur le document prêt. Si nous désactivons les champs de saisie pendant une seconde, cela échoue et nous pouvons réactiver les formulaires de saisie. Cela peut être utile pour les formulaires de connexion et les formulaires utilisateur sur cruds. Une meilleure approche sera de définir une superposition avec une animation de chargement ou quelque chose de plus convivial.

Exemple Jquery:

  $(document).ready(function() {

    $('#[FORM_ID] input').prop('disabled',true);
   setTimeout(function(){ $('#[FORM_ID] input').prop('disabled',false); }, 1000);
});

Remplacez # [FORM_ID] par l'ID de votre formulaire.

0
Srok

Merci d'avoir rouvert cette discussion. J'ai cherché d'autres endroits pour publier ma solution, mais aucun d'eux n'accepte de nouvelles réponses. Si vous en avez marre de toutes les autres "solutions" et que vous ne parvenez pas à en faire fonctionner une, je vous suggère ma fonction d'annihilation - lorsque vous n'êtes pas en train de "demander" Chrome pour arrêter ce non-sens, mais plutôt commandant.

function annihilateChromesAutocomplete(){
        var clearAutocompleteInterval = setInterval(function(){
                var peskyAutocompletedInputs = document.querySelectorAll("input:-internal-autofill-selected");
                for(var i = (peskyAutocompletedInputs.length - 1); i > -1; i--){
                        peskyAutocompletedInputs[i].value = peskyAutocompletedInputs[i].defaultValue;
                }
        }, 1);
        setTimeout(function(){
                clearInterval(clearAutocompleteInterval);
        }, 2000);
}
0
Aaron Plocharczyk

Pour le moment (mai 2019) seulement autocomplete="new-password" fonctionne bien.

Il peut faire par programmation avec jQuery par exemple:

$('form, input, select').attr('autocomplete', 'new-password');
0
Jul