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

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

Answer 2

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

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

祝你好运！

Answer 3

autocomplete =＆＃34; off＆＃34; Chrome会自动受到尊重，但您所遇到的是Chrome自动填充功能，它会取代自动完成=＆＃34;关闭＆＃34;：https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill。

过去，许多开发人员会添加autocomplete =＆＃34; off＆＃34;到他们的表单字段，以防止浏览器执行任何类型的自动完成功能。虽然Chrome仍然会将此标记视为自动填充数据，但它不会尊重自动填充数据。

我做了一些测试，从我在这里看到的Chrome igonores autocomplete =＆＃34; off＆＃34;何时可以将fieldname映射到其自动填充属性之一。这将有效<input type="text" name="somethingAutofillDoesntKnow" autocomplete="off" />，但对于此fieldName，自动填充将显示<input type="text" name="firstName" autocomplete="off" />。

一种解决方法是在自动填充中添加未知值，例如自动填充=＆＃34; doNotAutoComplete＆＃34 ;.在测试时，它大部分时间都适合我，但由于某种原因，之后不再工作。

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

Answer 4

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

示例：

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

Answer 5

autocomplete="off" 不工作，你只需要输入这样的东西。

<input class="form-control" autocomplete="new-username" 
            formControlName="username" name="username" type="text">

代替：

<input class="form-control" autocomplete="off" 
            formControlName="username" name="username" type="text">

Answer 6

autocomplete =“ off” / autocomplete =“ false” / autocomplete =“ disabled”对我不起作用。

但是，在单个字段中设置autocomplete =“ new-fieldname”对我有用。但这不适用于form元素。

Chrome版本：81.0.4044.122

 <input class="form-control" type="text" name="first_name" autocomplete="new-name" required>

Answer 7

考虑到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 8

在Angular中，该指令对我有用。使用autocomplete="off"应该已经解决了这个问题，但是除非您使用超时，否则DOM呈现顺序似乎可以阻止该问题。

此外，如果您使用mat-form-field之类的东西，并且根据唯一名称生成自动完成功能，则可以在第一个字符之后和最后一个字符之前的任意位置添加Zero-width non-joiner。

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

@Directive({
  selector: '[NoAutocomplete]',
})
export class NoAutocompleteDirective implements AfterViewInit {
  constructor(private renderer: Renderer2, private _el: ElementRef) {}
  ngAfterViewInit() {
    setTimeout(() => {
      const inputs = Array.prototype.slice.call(this._el.nativeElement.querySelectorAll('input'))
      inputs.map((e, i) => {
        this.renderer.setAttribute(e, 'autocomplete', 'off')
      })
      // If you're using mat-form-field
      const labels = Array.prototype.slice.call(
        this._el.nativeElement.querySelectorAll('.mat-form-field-label')
      )
      labels.map((l, i) => {
        l.innerHTML = l.innerHTML.replace(
          l.textContent,
          l.textContent.substring(0, 1) + '&zwnj;' + l.textContent.substring(1)
        )
      })
    }, 0)
  }
}

Answer 9

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

Answer 10

这可能是“笨拙的”，但对我来说效果很好。

component.html：

<input type="email"
      ngModel
      name="email"
      required
      #email="ngModel"
      [readonly]="isReadOnly">

component.ts：

  isReadOnly = true;

  ngOnInit() {
    //deal with pesky autocomplete
    setTimeout(() => {
      this.isReadOnly = false;
    }, 2000);
  }

是新手，因此非常感谢反馈。

Answer 11

多年来，我一直在为此奋斗，而对我而言唯一有效的解决方案是使用下面的代码覆盖FormGroup registerControl（）函数。基本上，它会找到输入元素，并向其添加向导。

@Component({
 selector: '[fsForm]',
 template: `<ng-content></ng-content>`,
 changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FsFormComponent {

  public ngOnInit() {

    this._registerControl = this.ngForm.form.registerControl.bind(this.ngForm.form);

    this.ngForm.form.registerControl = (name: string, control: AbstractControl) => {

      const el: Element = this._element.nativeElement.querySelector(`input[name='${name}']`);

      if (el) {
        el.setAttribute('name', name + '_' + guid());

        if (!el.getAttribute('autocomplete')) {
          el.setAttribute('autocomplete', 'none');
        }
      }

      return this._registerControl(name, control);
    }
  }
}

Answer 12

我遇到了同样的问题，对我来说，问题是 LastPass 。断开连接后，一切正常。和两周的代码重写来查找错误。当然，我在互联网上找不到适合的解决方案。

我有两条路要走：在Firefox上我没有遇到问题，并且在重新加载页面几毫秒后进行了输入字段修改。

Chrome出现了问题吗？也许。但是禁用LastPass确实使戏法难忘

Answer 13

我遇到了同样的问题，其中autocomplete =“ false”不起作用，然后我尝试了autocomplete =“ off”，但是在某些客户端系统中，autocomplete =“ off”起作用了。但是对于少数用户却失败了，建议您输入输入代码：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

这个条件对我来说很好

Answer 14

autocomplete="off" 单独可能无法完成这项工作。 Chrome 会在没有 input 属性的情况下尝试猜测 name 的类型，有时会出错。对我有用的技巧是添加名称属性。

<mat-form-field>
    <mat-label>Track</mat-label>
    <input name="track" matInput autocomplete="off" [(ngModel)]="track">
</mat-form-field>

希望这对某人有帮助?

Answer 15

我需要为所有 89 个输入执行此操作，因此，我将其插入到我的 html 文件中并为我工作。铬 89.0

<script>
    $("input").each((a,b) => $(b).attr("autocomplete", "new-field-" + 
 Math.random().toString(36).substring(2)))
</script>

Answer 16

对我来说，autocomplete="off" 和更改 name 属性都没有单独工作。

但一起（将 autocomplete 更改为随机值 - 任何其他网站都未使用且 name 属性不同的值）它起作用了。

我猜 Chrome 正试图根据自动完成值和名称值过于聪明和猜测。

以下是我的工作解决方案示例：

<input matInput formControlName="email" autocomplete="noac" type="email" name="emailnoauto" placeholder="E-Mail" />

这不是很好，但它有效。

Answer 17

我认为只需要输入标签上的选项。

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

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

17 个答案: