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