编写账户注册的页面遇到了些小麻烦,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;
}