javascript 有没有办法禁用角度表单字段的 chrome 自动填充选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52139123/
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
Is there a way to disable chrome autofill option for angular form fields
提问by Shaik Nizamuddin
I have tried using autocomplete false and also auto complete off. The cache is removed from the field, but iam still seeing chrome autofill data. Is there a way to disable chrome autofill option in angular forms? Any suggestions would be appreciated. Thanks
我试过使用自动完成假和自动完成关闭。缓存已从该字段中删除，但我仍然看到 Chrome 自动填充数据。有没有办法以角度形式禁用 chrome 自动填充选项？任何建议，将不胜感激。谢谢
回答by Panos
Please check the autocomplete="new-password":
请检查自动完成=“新密码”：
<input type="password" name="password" value="" autocomplete="new-password" />
It worked for me. Found in Google documentation
它对我有用。在谷歌文档中找到
回答by Ayoub k
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 仍然会尊重自动完成数据的这个标签，但它不会尊重自动填充数据。
One workaround is to put an unknown value in the autocomplete, e.g. <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />. When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.
一种解决方法是在自动完成中放置一个未知值，例如<input type="text" name="somethingAutofillDoesntKnow" 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 Oscar Caldeira
Just change your input from type TEXT to type SEARCH.
只需将您的输入从类型 TEXT 更改为类型 SEARCH。
<input type="search" name="your_address" autocomplete="nope" />
Chrome fill work with text fields but it's ignored on search type.
Chrome 填充文本字段，但它在搜索类型上被忽略。
回答by Marcus
Through some trial and error testing, it appears that if you set the input name and autocomplete attributes to a random string, Chrome's autofill is prevented from appearing. I created a small directive to achieve this.
通过一些反复试验，似乎如果您将输入名称和自动完成属性设置为随机字符串，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);
}
}
回答by Mike
Chrome seems to ignore all practical/clean attempts to stop this - so we need to get a little hacky. I prevented this using 2 honeypot inputs. They can NOT be "display:none" or they will get skipped. So I wrapped them in a div that's height:0; overflow:hidden; and gave them opacity 0 (just to be double sure). Your real inputs must come AFTER the honeypots. See below
Chrome 似乎忽略了阻止这种情况的所有实际/干净的尝试 - 所以我们需要有点 hacky。我使用 2 个蜜罐输入阻止了这种情况。它们不能是“display:none”，否则它们会被跳过。所以我将它们包裹在一个高度为 0 的 div 中；溢出：隐藏；并给它们不透明度 0（只是为了加倍确定）。您的真正输入必须在蜜罐之后。见下文
<!-- 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 -->
回答by Mr.Sprung
TLDR; Don't label your inputs with obvious names or Chrome will pick that up and autofill the input.
TLDR；不要用明显的名称标记您的输入，否则 Chrome 会选择并自动填充输入。
I often use a form-groupclass to wrap my labels and inputs together, pretty common practice. So much so the only way I found to get around AutoFill in Chrome (Angular 8, Chrome v80) was to change the value of my label for the input.
我经常使用一个form-group类来将我的标签和输入包装在一起，这是很常见的做法。因此，我发现在 Chrome（Angular 8，Chrome v80）中绕过 AutoFill 的唯一方法是更改输入标签的值。
Turns Off AutoFill:
关闭自动填充：
<div class="form-group">
<label for="aRandomPlace" class="form-group-label">Pickup Location</label>
<input type="text" name="aRandomPlace" [(ngModel)]="data.address" class="form-group-input">
</div>
Does Not Turn Off AutoFill:
不关闭自动填充：
<div class="form-group">
<label for="address" class="form-group-label">Pickup Address</label>
<input type="text" name="address" [(ngModel)]="data.address" class="form-group-input">
</div>
回答by grigson
It appears that autocomplete="off"can be used directly on form tag.
Useful when you have a lot of text inputs
看来autocomplete="off"可以直接用在form标签上。当你有很多文本输入时很有用
<form [formGroup]="vmForm" autocomplete="off">
- Google Chrome Version 78.0.3904.108
- 谷歌浏览器版本 78.0.3904.108
