禁用具有角度形式和镶边的自动填充/自动填充

Question

我有一个简单的表单,我需要禁用自动填充/自动填充与角形式.

我在StackOverflow上搜索,但我找不到解决方案.

我使用了autocomplete ="off"或autocomplete ="false",但从未禁用自动完成功能.

有时在加载页面时会暂时禁用自动完成功能.但是,过了一段时间后,当我重新加载页面时,问题再次出现.

//来自上图的标记

<input type="text" class="form-control input-lg ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" capitalize-full="" ng-model="user.ENDERECO" required="" placeholder="Digite seu endereço" autocomplete="off" name="street" style="opacity: 1; text-transform: uppercase;">

//标记示例

<form class="form form-horizontal" name="regForm" 
              autocomplete="false" novalidate role="form">
 <input  type="text" class="form-control input-lg"                           
  name="cpf" ng-model="user.CPF" placeholder="Digite seu CPF" 
   required autocomplete="false" >
</form>

Answer 1

只需将 autocomplete="new-feildName" 放在 html 控件上

例子 ：

 <input class="signup-input-field-01" autocomplete="new-phone" 
            formControlName="phone" name="phone" type="text">

Answer 2

Chrome 有效地尊重 autocomplete="off"，但您遇到的是 Chrome 自动填充功能接管，忽略 autocomplete="off"：https : //developers.google.com/web/updates/2015/ 06/checkout-faster-with-autofill。

过去，许多开发人员会在他们的表单字段中添加 autocomplete="off" 以防止浏览器执行任何类型的自动完成功能。虽然 Chrome 仍然会尊重自动完成数据的这个标签，但它不会尊重自动填充数据。

我做了一些测试，从我在这里看到的 Chrome 忽略了 autocomplete="off" 当它可以将字段名映射到它的自动填充属性之一时。这会起作用<input type="text" name="somethingAutofillDoesntKnow" autocomplete="off" />，但是对于这个 fieldName 自动填充会出现<input type="text" name="firstName" autocomplete="off" />。

一种解决方法是在自动完成中放置一个未知值，例如 autocomplete="doNotAutoComplete"。在测试它时，它大部分时间对我有用，但由于某种原因之后不再起作用。

我的建议是不要反对它并通过正确使用自动完成属性来利用它的潜力，如下所述：https : //html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

Answer 3

在2018年4月：设置autocomplete="off"表单本身对我有用（在Chrome上测试）。在单个元素上设置此属性无效。

Answer 4

考虑到 chrome 在凭据/地址/信用卡数据类型的情况下忽略 autocomplete="off" 属性值，作为一种解决方法，我使用此指令成功解决了我的问题：

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

@Directive({
  selector: '[autocomplete]'
})
/**
 * Alterates autocomplete="off" atribute on chrome because it's ignoring it in case of credentials, address or credit card data type.
 */
export class AutocompleteDirective implements OnInit {
  private _chrome = navigator.userAgent.indexOf('Chrome') > -1;
  constructor(private _el: ElementRef) {}
  ngOnInit() {
    if (this._chrome) {
      if (this._el.nativeElement.getAttribute('autocomplete') === 'off') {
        setTimeout(() => {
          this._el.nativeElement.setAttribute('autocomplete', 'offoff');
        });
      }
    }
  }
}

Answer 5

在 Chrome 上，指定autocomplete="off"对我不起作用。但是，autocomplete="disabled"工作正常。

您可以使用此页面进行测试和评估：https : //www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_autocomplete（尝试使用浏览器将关闭更改为禁用）。

祝你好运！

Answer 6

试试看<input autocomplete="off" type="search">对我有用

Answer 7

长话短说，没有单一的解决方案，只有一种解决方法，具体取决于浏览器和您想要做什么。（此答案适用于 Chrome 和 Edge）

首先要事

1. autocomplete 不是一个布尔字段，相反，它是一个可以有多个值的字段，具体取决于字段的类型，您可以在此处查找更多信息 https://developer.mozilla.org/en-US/docs/Web /HTML/属性/自动完成

2. 即使 Edge 使用 Chromium，Chrome 和 Edge 的行为也不同

3. 我正在使用 Angular，但你可以为任何其他框架解决它，在我的例子中，我必须使用 ngAfterViewInit()，然后使用 0.5 秒的 setTimeout()

4. 我最初的问题是使用谷歌地址搜索服务（最初我认为这是我唯一的问题）

解决问题

1. 将表单设置为 autocomplete=off，希望有一天这应该足够了，但出于某种原因，Chrome 不这么认为

2. 循环遍历所有输入并设置 autocomplete="off" （这也应该是遥远的将来的解决方案）

3. 将 address-form-google-search 输入设置为 autocomplete="nope" （或实际值以外的任何其他值）

4. 将所有地址字段设置为“nope”您可以查看函数 setAddressFields()

5. 虽然“不”适用于地址字段，但在 Edge 中，还可以保存自定义字段（查看设置地址），因此，我必须采取解决方法，就我而言，没有任何效果，所以我不得不hack 并使用有效的自动完成值（在本例中我使用了附加名称），我很幸运 Edge 接受了该值并且没有将其作为选项保存在设置中

6. 地址字段修复后，我遇到了 Chrome/Edge 会记住您在字段中输入的内容的问题，即使它不是地址，所以我必须使用随机值重命名该名称

我希望我没有拐弯抹角太多，但如果你没有遇到所有这些问题，那是因为你没有进行足够的测试。请转到 Chrome/Edge 并打开“设置”并在其中添加“地址”字段（确保已启用），还要添加信用卡信息，您将看到之前的所有答案都只是部分解决方案。到目前为止，一切看起来都很好，如果 QA 发现另一个问题，我会回来编辑这篇文章。

注意：在使用 extra-name 之前，我查看了列表，cc-number 似乎工作正常，在各处进行了测试，对于 Edge 和 Chrome 来说这是相同的解决方案，直到我意识到 cc-number 用于信用卡，遗憾的是我的应用程序中有这个，所以一旦我添加了信用卡，我就回到了第 1 步。所以到目前为止，附加名称对我有用，但谁知道将来会怎样:)

  ngAfterViewInit() {
    setTimeout(() => {
      // turn off any input field
      document.querySelectorAll('input').forEach((element) => {
        element.setAttribute('autocomplete', 'off');
      });
      document.querySelectorAll('textarea').forEach((element) => element.setAttribute('autocomplete', 'off'));

      // this code disable address fields
      document.querySelector('#address-form-google-search').setAttribute('autocomplete', 'nope');
      if (/Edg/.test(navigator.userAgent)) {
        this.setAddressFields('additional-name');
      } else {
        this.setAddressFields('nope');
      }

      // other fields may still save the information by looking at name, here we randomize the name
      const random = Math.random();
      document.querySelectorAll('input').forEach((element) => {
        if (element.id !== 'address-form-google-search') {
          element.setAttribute('name', element.name + '_' + random);
        }
      });

    }, 500);
  }

Answer 8

我假设该选项仅在输入标签上需要。

<input name="q" type="text" autocomplete="off"/>