如何禁用密码字段中的自动填充（自动完成）（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"