Есть ли способ отключить параметр автозаполнения Chrome для угловых полей формы

Question

Я попытался использовать автозаполнение false, а также отключение автозаполнения. Кэш удален с поля, но я все еще вижу данные автозаполнения Chrome. Есть ли способ отключить опцию автозаполнения Chrome в угловых формах? Мы ценим любые предложения. Спасибо

Answer 1

В результате тестирования методом проб и ошибок выясняется, что если вы установите для входного имени и атрибутов автозаполнения случайную строку, автозаполнение Chrome не будет отображаться. Я создал небольшую директиву для достижения этой цели.

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

}

Answer 2

Просто измените ваш ввод с типа ТЕКСТ на тип ПОИСК.

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

Заполнение Chrome работает с текстовыми полями, но игнорируется при поиске.

Answer 3

Chrome, похоже, игнорирует все практические / чистые попытки остановить это - поэтому нам нужно немного повеселиться. Я предотвратил это, используя 2 входа honeypot. Они НЕ МОГУТ быть «показывать: нет», иначе они будут пропущены. Поэтому я обернул их в div, высота которого: 0; переполнение: скрытый; и дал им непрозрачность 0 (просто чтобы быть уверенным в двойной). Ваш реальный вклад должен прийти ПОСЛЕ honeypots. Смотри ниже

        <!-- 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 -->

Answer 4

Пожалуйста, проверьте autocomplete = "новый пароль":

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

Это сработало для меня. Найдено в Google документации

Answer 5

Chrome эффективно соблюдает autocomplete = "off", но вы сталкиваетесь с функцией автозаполнения Chrome, игнорируя autocomplete = "off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.

В прошлом многие разработчики добавляли autocomplete = "off" в свои поля формы, чтобы браузер не выполнял какие-либо функции автозаполнения. Хотя Chrome по-прежнему будет учитывать этот тег для данных автозаполнения, он не будет учитывать его для данных автозаполнения.

Один из обходных путей - поместить неизвестное значение в автозаполнение, например, <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />. При тестировании это работало для меня большую часть времени, но по какой-то причине больше не работало.

Мой совет не бороться с этим и не использовать его потенциал, правильно используя атрибут autocomplete, как объяснено здесь: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill