如何在創建和編輯用戶頁面時禁用瀏覽器的登錄名和密碼自動完成功能？

Question

瀏覽器會記住登錄名和密碼，並會在創建和編輯用戶時自動填充輸入內容。 我希望僅在登錄頁面上啟用它。 將整個表格的autocomplete設置為off ，並且每次輸入都無濟於事。 我在頁面加載后將密碼輸入的類型更改為text並使用JavaScript將其修改為password ，但這也無濟於事。 似乎name和id屬性的值是什么都沒有關系-它總是為每個<input type="password" />元素填充登錄名和密碼，並在其前面添加一個<input type="text" />元素。

這是我在Razor視圖中用於創建新用戶的代碼片段（以下也是純HTML）：

<div class="form-group">
    @Html.LabelFor(model => model.Email, new { @class = "control-label col-sm-3" })
    <div class="col-sm-8">
        @Html.TextBoxFor(model => model.Email, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Password, new { @class = "control-label col-sm-3" })
    <div class="col-sm-8">
        @Html.PasswordFor(model => model.Password, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.ConfirmPassword, new { @class = "control-label col-sm-3" })
    <div class="col-sm-8">
        @Html.PasswordFor(model => model.ConfirmPassword, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.ConfirmPassword, "", new { @class = "text-danger" })
    </div>
</div>

將ASP.NET MVC幫助器的相同代碼轉換為HTML：

<div class="form-group">
    <label class="control-label col-sm-3" for="Email">Email address</label>
    <div class="col-sm-8">
        <input class="form-control" data-val="true" data-val-email="The Email address field is not a valid e-mail address." data-val-required="The Email address field is required." id="Email" name="Email" type="text" value="" />
        <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-3" for="Password">Password</label>
    <div class="col-sm-8">
        <input class="form-control" data-val="true" data-val-length="The Password must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
        <span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-3" for="ConfirmPassword">Confirm password</label>
    <div class="col-sm-8">
        <input class="form-control" data-val="true" data-val-equalto="The password and confirmation password do not match." data-val-equalto-other="*.Password" data-val-required="The Confirm password field is required." id="ConfirmPassword" name="ConfirmPassword" type="password" />
        <span class="field-validation-valid text-danger" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
    </div>
</div>

Answer 1

我在登錄名和密碼的input元素之間插入了沒有id和name假input元素：

<input type="text" class="fakeInputToDisableCredentialsAutocomplete" />

我無法通過將display屬性設置為none來隱藏它。 必須將其visibility值設置為“ hidden並將position值設置為“ absolute以防止其他元素移位。

.fakeInputToDisableCredentialsAutocomplete{
    position: absolute;
    visibility: hidden; 
}

它也解決了帶有密碼確認的輸入問題，但我把它放在每次input type="password"前面，以防萬一。 我在Google Chrome，Internet Explorer 11和Microsoft Edge中對其進行了測試。

Answer 2

有兩種解決方案：

1. 在用戶名和密碼之間插入一個假的隱藏輸入框
2. 將用戶名和密碼分成2頁

用於偽造的隱藏輸入框，適用於IE，Chrome，Firefox。 但不適用於Safari