我已经尝试了使用autocomplete false和auto complete off。缓存已从字段中删除,但我仍然看到chrome自动填充数据。是否有一种方法可以在angular表单中禁用chrome自动填充选项?任何建议都将不胜感激。谢谢
我已经尝试了使用autocomplete false和auto complete off。缓存已从字段中删除,但我仍然看到chrome自动填充数据。是否有一种方法可以在angular表单中禁用chrome自动填充选项?任何建议都将不胜感激。谢谢
请查看autocomplete="new-password":
<input type="password" name="password" value="" autocomplete="new-password" />
这对我很有效。在Google文档中找到。
<input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />
。在测试中,这对我大部分时间都有效,但出于某种原因之后不再有效。autocomplete="no"
。我还成功尝试了“no”,“*”,“nope”,“sdjlf”,“!”。这对我来说似乎不太合理,但它确实起作用了。 - Max Oriola通过一些试验和错误的测试,发现如果将输入框的名称和自动填充属性设置为随机字符串,则可以防止 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);
}
}
只需要将您的输入类型从TEXT更改为SEARCH即可。
<input type="search" name="your_address" autocomplete="nope" />
Chrome可以填充文本字段,但在搜索类型上被忽略。
Chrome似乎忽略所有实际/干净的尝试来阻止这种情况 - 因此我们需要使用一些hacky方法。我使用了两个蜜罐输入框来防止这种情况发生。它们不能是"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 -->
我曾遇到类似的问题,使用了谷歌地点自动完成的第三方库ngx-google-places-autocomplete,导致自动填充与谷歌建议地址重叠,无法用任何解决方案解决。 最终通过以下focus
事件解决了此问题。
<input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"
type="text" class="form-control" id="address1"
formControlName="address1" placeholder="Street address, P.O. box" required (focus)="setAutoFillOff($event)">
setAutoFillOff(event: any) {
if (event) {
event.target.attributes['autocomplete'].value = 'chrome-off';
}
}
我发布这篇文章是为了帮助那些可能处于类似情况的人。
禁用自动补全功能
要在表单中禁用自动补全功能,您可以将autocomplete属性设置为“off”: 您可以为整个表单或表单中特定的输入元素执行此操作:
<form [formGroup]="exampleForm" autocomplete="off">
...
</form>
// or
<form [formGroup]="exampleForm">
<div>
<label >Credit card:</label>
<input type="text" id="cc" name="cc" autocomplete="off">
</div>
</form>
禁用登录字段: 许多现代浏览器不支持在登录字段中使用autocomplete="off":
为了防止密码字段自动填充,您可以使用
autocomplete="new-password"
请检查 autocomplete="off webauthn"
在阅读文档https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill后,我提出了这种方法
<input matInput type="password" formControlName="pwd" autocomplete="off webauthn">
<input type="text" class="form-control" id="inputId"
name="inputName" autocomplete="new-inputName"
[(ngModel)]="model">
注意:如上所示,使用“new-form_element_name”作为自动完成属性。
对我很有效!!!
[type]="(field.length > 0)? 'password' : 'text'"