jQuery 使用角形和镀铬禁用自动填充/自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48084770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable autofill/autocomplete with angular form and chrome
提问by Luiz Alves
I have a simple form where I need disable autofill/autocomplete with angular form.
我有一个简单的表单，我需要使用角度表单禁用自动填充/自动完成。
I have search on StackOverflow, but I didn′t find a solution.
我在 StackOverflow 上搜索过，但没有找到解决方案。
I have used autocomplete="off" or autocomplete="false" but the autocomplete is never disabled.
我使用过 autocomplete="off" 或 autocomplete="false" 但自动完成功能从未被禁用。
Sometimes the autocomplete is disabled temporarily when I load a page. But, after some time after, when I reload the page the problem appears again.
有时，当我加载页面时，自动完成功能会被暂时禁用。但是，一段时间后，当我重新加载页面时，问题再次出现。
//markup from image above
//来自上图的标记
<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;">
//markup sample
//标记示例
<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>
回答by Suparna Gharpure
In April 2018: Setting autocomplete="off"on the form itself worked for me (tested on Chrome). Setting this attribute on individual elements did not work.
2018 年 4 月：设置autocomplete="off"表单本身对我有用（在 Chrome 上测试）。在单个元素上设置此属性不起作用。
回答by Chris Aelbrecht
The autocomplete="off" is effectively respected by Chrome, but what you're experiencing is the Chrome autofill functionality that takes over, ignoring autocomplete="off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.
Chrome 有效地尊重了 autocomplete="off"，但您遇到的是 Chrome 自动填充功能接管，忽略了 autocomplete="off"：https: //developers.google.com/web/updates/2015/ 06/checkout-faster-with-autofill。
In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data.
过去，许多开发人员会在他们的表单字段中添加 autocomplete="off" 以防止浏览器执行任何类型的自动完成功能。虽然 Chrome 仍然会尊重自动完成数据的这个标签，但它不会尊重自动填充数据。
I did some test and from what I see here Chrome igonores the autocomplete="off" when it can map the fieldname to one of it's autofill properties. This will work <input type="text" name="somethingAutofillDoesntKnow" autocomplete="off" />, but for this fieldName Autofill will show up <input type="text" name="firstName" autocomplete="off" />.
我做了一些测试，从我在这里看到的 Chrome 忽略了 autocomplete="off" 当它可以将字段名映射到它的自动填充属性之一时。这会起作用<input type="text" name="somethingAutofillDoesntKnow" autocomplete="off" />，但是对于这个 fieldName 自动填充会出现<input type="text" name="firstName" autocomplete="off" />。
One workaround is to put an unknown value in the autocomplete, e.g. autocomplete="doNotAutoComplete". When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.
一种解决方法是在自动完成中放置一个未知值，例如 autocomplete="doNotAutoComplete"。在测试它时，它大部分时间对我有用，但由于某种原因之后不再起作用。
My advise is not to fight against it and use it's potential by properly using the autocomplete attribute as explained here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
我的建议是不要反对它并通过正确使用自动完成属性来利用它的潜力，如下所述：https: //html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
回答by Bogdanel
Considering that chrome ignores the autocomplete="off" attribute value in case of credentials/address/credit card data type, as a workaround I have used this directive successfully solving my problem:
考虑到 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');
});
}
}
}
}
回答by yael kfir
Try <input autocomplete="off" type="search">it worked for me
试试看<input autocomplete="off" type="search">对我有用
回答by Sandeep Patel
Simply put autocomplete="new-feildName" on html control
只需将 autocomplete="new-feildName" 放在 html 控件上
Example :
例子 ：
<input class="signup-input-field-01" autocomplete="new-phone"
formControlName="phone" name="phone" type="text">
回答by francojay
In Angular, this directive worked for me. Using the autocomplete="off"should have solved the issue, but it seems as though the DOM rendering sequence prevents that unless you use a timeout.
在 Angular 中，这个指令对我有用。使用autocomplete="off"应该已经解决了这个问题，但似乎 DOM 渲染序列会阻止这种情况，除非您使用超时。
Additionally, if you use something like mat-form-fieldand autocomplete is generated based on the unique names, you can add a Zero-width non-joineranywhere after the first character and before the last character.
此外，如果您使用类似的东西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) + '‌' + l.textContent.substring(1)
)
})
}, 0)
}
}
回答by Gerlando Caldara
I would assume the option is only needed on the input tag.
我认为该选项仅在输入标签上需要。
<input name="q" type="text" autocomplete="off"/>
回答by John Doe
I have the same problem, for me the problem was LastPass. Once disconnected everything works just fine. And two weeks of code rewriting to find the bug. Of course none that I find on internet fit the solution.
我有同样的问题，对我来说问题是LastPass。断开连接后一切正常。以及两周的代码重写以找到错误。当然，我在互联网上找到的没有一个适合解决方案。
I had two tracks: with Firefox I didn't had the problem and the input field modification happens after few milliseconds the page reload.
我有两条轨道：使用 Firefox 我没有遇到问题，并且在页面重新加载几毫秒后发生输入字段修改。
So was a Chrome problem ? maybe. But disabling LastPass did the hat trick
那么是 Chrome 的问题吗？也许。但是禁用 LastPass 实现了帽子戏法
回答by Raymond
I have been battling with this for years and the only solution that works for me is to override the FormGroup registerControl() function with the code below. It basically finds the input element and appends a guid to it.
多年来我一直在与这个问题作斗争，唯一对我有用的解决方案是使用下面的代码覆盖 FormGroup registerControl() 函数。它基本上找到输入元素并为其附加一个 guid。
@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);
}
}
}
回答by JAD
On Chrome, specifying autocomplete="off"didn't work for me. However, autocomplete="disabled"worked properly.
在 Chrome 上，指定autocomplete="off"对我不起作用。但是，autocomplete="disabled"工作正常。
You can test and evaluate using this page: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_autocomplete(try changing the off to disabled using your browser).
您可以使用此页面进行测试和评估：https: //www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_autocomplete（尝试使用浏览器将关闭更改为禁用）。
Goodluck!
祝你好运！
