input password 不自動填充

編寫賬戶注冊的頁面遇到了些小麻煩，type為password的input總是被緩存自動填充

解決這一問題找了許多資料大多數如資料一，不過對于我并不适用。

于是我找到了資料二，這裡面的一些答案可以使用，不過要注意幾點。

代碼環境（chrome）

問題代碼（利用登入的頁面進行說明），這裡的密碼會被自動填充，如圖1

<form id="loginForm" class="user-dialog hide">
    <div class="user-title">登入系統</div>
    <div id="loginClose" class="user-close">×</div>
    <div class="user-account">
        <div class="user-information">
            <label for="loginEmail" class="hide">email</label>
            <input type="email" id="loginEmail" placeholder="郵箱"/>
        </div>
        <div class="user-information">
            <label for="loginPassword" class="hide">password</label>
            <input type="password" id="loginPassword" placeholder="密碼"/>
        </div>
        <div class="user-operation">
            <input type="button" id="login" class="user-login" value="登入"/>
        </div>
        <div class="user-operation">
            <input type="button" id="registerAccount" class="user-register" value="新增賬號"/>
            <input type="button" id="forgetPassword" class="user-forget" value="忘記密碼"/>
        </div>
    </div>
</form>
           

圖1.

修改方案一代碼（失敗），如圖2

<div class="user-information">
    <label for="loginPassword" class="hide">password</label>
    <input type="password" id="loginPassword" placeholder="密碼"/>
    <input type="password" id="second" placeholder="第二個password"/>
</div>
           

圖2.

修改方案二代碼（成功），如圖3

<div class="user-information">
    <label for="loginPassword" class="hide">password</label>
    <input type="password" id="loginPassword" placeholder="密碼"/>
    <input type="password" placeholder="第二個password"/>
</div>
           

圖3.

兩者差別：

一中有id，二中沒有。如果将id屬性替換成name屬性同樣會失敗。具體原因不是很清楚，不過這應該是浏覽器影響的。

最終代碼，如圖4

<div class="user-information">
    <label for="loginPassword" class="hide">password</label>
    <input type="password" class="hide" id="loginPassword" placeholder="密碼"/>
    <input type="password" placeholder="第二個password"/>
</div>
           

圖4.

input的id屬性可用來綁定label标簽，實作無障礙的支援，雖然去掉id可以實作不填充的效果，不過個人認為這個方案不是很好。

參考css

.hide {
    display: none;
}

.user-dialog {
    top: 50%;
    left: 50%;
    margin: -141px 0 0 -201px;
    width: 400px;
    height: 280px;
    position: fixed;
    border: 2px solid #c35ac1;
    text-align: center;
    font-size: 14px;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 102400;
}

.user-title {
    margin-top: 5px;
    color: #111111;
    font-size: 20px;
}

.user-close {
    margin-top: -35px;
    margin-left: 370px;
    font-size: 32px;
    float: left;
    color: #999999;
    position: absolute;
    cursor: pointer;
}

.user-close:hover {
    color: #c35ac1;
}

.user-account {
    padding: 20px 10px 10px;
}

.user-information, .user-operation {
    margin-top: 15px;
}

.user-information > input {
    height: 35px;
    width: 250px;
    padding: 20px;
    border: 1px solid #999999;
    border-radius: 4px;
    outline-style: none;
    font-size: 14px;
    background-color: transparent;
}

.user-information > input:hover {
    border: 1px solid #c35ac1;
}

.user-login {
    width: 250px;
    height: 30px;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #999999;
    border-radius: 5px;
}

.user-register, .user-forget {
    width: 100px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
}

.user-login:hover, .user-register:hover, .user-forget:hover {
    cursor: pointer;
    color: #c35ac1;
}