如何在密码字段（chrome和firefox）中禁用自动填充（自动完成）

Question

我已经实现了“更改密码”功能，它具有“旧密码”、“新密码”和“重新输入密码”字段。所有这些密码字段都建议将其他用户帐户的密码作为自动完成字段。 如何在密码字段中禁用自动完成。 （chrome 版本-83.0.4103.116，Firefox 版本-78.0.1）

我尝试了以下方法，并输入了表单和输入字段。

autocomplete ="off" 
autocomplete ="nope"
autocomplete ="false"
autocomplete ="new-password"

这些都不起作用。

我的密码输入代码如下

<div class="form-group col">
   <label for="oldPassword">Old Password</label>
   <input type="password" formControlName="oldPassword" class="form-control" [ngClass]="{ 'is-invalid': submittedupdatepassword && updatepassform.oldPassword.errors }" />
   <div *ngIf="submittedupdatepassword && updatepassform.oldPassword.errors" class="invalid-feedback">
   <div *ngIf="updatepassform.oldPassword.errors.required">old password is required</div>
   </div>
</div>

 <form [formGroup]="updatepasswordform" (ngSubmit)="updatePassword()">
        
            <div class="form-row">
                <div class="form-group col">
                    <label for="oldPassword">Old Password</label>
                    <input type="password" formControlName="oldPassword" class="form-control" [ngClass]="{ 'is-invalid': submittedupdatepassword && updatepassform.oldPassword.errors }" />
                    <div *ngIf="submittedupdatepassword && updatepassform.oldPassword.errors" class="invalid-feedback">
                        <div *ngIf="updatepassform.oldPassword.errors.required">old password is required</div>
                    </div>
                </div>
                <div class="form-group col">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col">
                    <label for="newPassword">New Password</label>
                    <input type="password" formControlName="newPassword" class="form-control" [ngClass]="{ 'is-invalid': submittedupdatepassword && updatepassform.newPassword.errors }" />
                    <div *ngIf="submittedupdatepassword && updatepassform.newPassword.errors" class="invalid-feedback">
                        <div *ngIf="updatepassform.newPassword.errors.required">password is required</div>
                        <div *ngIf="updatepassform.newPassword.errors.minlength">password should contain minimum 8 characters</div>
                        <div *ngIf="updatepassform.newPassword.errors.pattern">* Minimum eight in length.<br />
                            * At least one upper and one lower case English letter.<br />
                            * At least one digit.<br />
                            * At least one special character [#?!@$%^&*-].<br /></div>
                    </div>
                    
                </div>
                <div class="form-group col"></div>
            </div>
            <div class="form-row">
                <div class="form-group col">
                    <label for="confirmPassword">Retype Password</label>
                    <input type="password" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submittedupdatepassword && updatepassform.confirmPassword.errors }" />
                    <div *ngIf="submittedupdatepassword && updatepassform.confirmPassword.errors" class="invalid-feedback">
                        <div *ngIf="updatepassform.confirmPassword.errors.required">Retype password is required</div>
                    </div>
                </div>
                <div class="form-group col"></div>
            </div>
            <div class="errMsg" >{{errorMsg}}</div>
            <div class="successMsg" >{{successMsg}}</div><br>

            <div class="form-group">
                <button  class="col-sm-2 update-btn btn btn-sm btn-rectangle btn-default text-case">
                    
                    Upadate
                </button>
               
            </div>
        </form>  

Answer 1

试试autocomplete="new-password"。这被现代浏览器识别为他们不应该提供用保存的密码填写密码字段的提示。 （但是，浏览器仍然会在用户完成表单后记住用户输入的密码。）

故意使密码字段与浏览器的密码管理器完全断开连接是不可能的。这是因为现代浏览器优先考虑安全实践而不是开发人员的灵活性，因此密码管理器等安全功能不是开发人员可以选择退出的。如果您确实需要一个不使用密码管理器的密码字段，您可能需要编写一些 JavaScript 来获取一个非密码文本字段来屏蔽其输入。

这篇 Mozilla 开发者网络文章更详细：https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields

Answer 2

请更改

自动完成=“关闭”

到

autocomplete="off"