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

Question

我已經實現了“更改密碼”功能，它具有“舊密碼”、“新密碼”和“重新輸入密碼”字段。 所有這些密碼字段都建議將其他一些用戶帳戶的密碼作為自動完成字段。 如何在密碼字段中禁用自動完成。 （鉻版本-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="off"

Answer 2

試試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