web-dev-qa-db-fra.com

Existe-t-il un moyen de désactiver chrome option de remplissage automatique pour angular champs de formulaire

J'ai essayé d'utiliser la saisie semi-automatique false et également la fonction de désactivation automatique. Le cache est supprimé du champ, mais je vois toujours chrome données de remplissage automatique. Existe-t-il un moyen de désactiver chrome option de remplissage automatique dans angular formulaires? Toute suggestion serait appréciée. Merci

javascriptangulargoogle-chrome
9
Shaik Nizamuddin

La saisie semi-automatique = "off" est effectivement respectée par Chrome, mais ce que vous rencontrez est la fonctionnalité de remplissage automatique Chrome qui prend le relais, ignorant la saisie semi-automatique = "off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill .

Dans le passé, de nombreux développeurs ajoutaient autocomplete = "off" à leurs champs de formulaire pour empêcher le navigateur d'exécuter tout type de fonctionnalité de saisie semi-automatique. Bien que Chrome respectera toujours cette balise pour les données de saisie semi-automatique, il ne la respectera pas pour les données de saisie automatique.

Une solution de contournement consiste à mettre une valeur inconnue dans la saisie semi-automatique, par exemple <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />. Lors du test, cela a fonctionné pour moi la plupart du temps, mais pour une raison quelconque, cela n'a plus fonctionné par la suite.

Mon conseil est de ne pas le combattre et d'utiliser son potentiel en utilisant correctement l'attribut de saisie semi-automatique comme expliqué ici: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

6
Ayoub k

Veuillez vérifier la saisie semi-automatique = "nouveau-mot de passe":

<input type="password" name="password" value=""  autocomplete="new-password" />

Ça a marché pour moi. Trouvé dans documentation Google

10
Panos

Modifiez simplement votre saisie du type TEXT au type SEARCH.

<input type="search" name="your_address" autocomplete="nope" />

Le remplissage Chrome fonctionne avec les champs de texte, mais il est ignoré dans le type de recherche.

4
Oscar Caldeira

Grâce à certains tests et erreurs, il semble que si vous définissez le nom d'entrée et les attributs de saisie semi-automatique sur une chaîne aléatoire, le remplissage automatique de Chrome ne peut pas apparaître. J'ai créé une petite directive pour y parvenir.

import { Directive, ElementRef, Renderer2, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[appDisableAutofill]'
})
export class DiableAutofillDirective implements AfterViewInit {

  constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) { }

  ngAfterViewInit() {
    const randomString = Math.random().toString(36).slice(-6);
    this.renderer.setAttribute(this.el.nativeElement, 'name', randomString);
    this.renderer.setAttribute(this.el.nativeElement, 'autocomplete', randomString);
  }

}
1
Marcus

Chrome semble ignorer toutes les tentatives pratiques/propres pour arrêter cela - nous devons donc faire un peu de hacky. J'ai empêché cela en utilisant 2 entrées de pot de miel. Ils ne peuvent PAS être "display: none" ou ils seront ignorés. Je les ai donc enveloppés dans un div de hauteur: 0; débordement caché; et leur a donné l'opacité 0 (juste pour être sûr). Vos entrées réelles doivent venir APRÈS les pots de miel. Voir ci-dessous

        <!-- honeypot prevents chrome user autofill bs-->
        <div style="height:0; overflow:hidden">
            <input style="opacity:0;" type="email" value="" class="" />
            <input style="opacity:0;" type="password" value=""  class="d-" />
        </div>
        <!-- end honeypot -->
        <!-- ... then put your real inputs after-->
            <input type="email" name="email" value="" class="" />
            <input type="password" name="password" value=""  class="d-" />
        <!-- end honeypot -->
0
Mike