input password 不自動填充

編寫帳戶註冊的頁面遇到了些小麻煩，type爲password的input老是被緩存自動填充css

解決這一問題找了許多資料大多數如資料一，不過對於我並不適用。html

因而我找到了資料二，這裏面的一些答案能夠使用，不過要注意幾點。chrome

代碼環境（chrome）segmentfault

問題代碼（利用登入的頁面進行說明），這裏的密碼會被自動填充，如圖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.緩存

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

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

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

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

二者區別：.net

一中有id，二中沒有。若是將id屬性替換成name屬性一樣會失敗。具體緣由不是很清楚，不過這應該是瀏覽器影響的。code

最終代碼，如圖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>

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;
}