一.自动填充的条件(谷歌浏览器 60.0.3112.90(正式版本) (64 位)
必须:input type=“text”与input=“password”,
text的顺序在password的前面,且password只能有一个
1).都没有name属性,input type='text'与input type='password'各只有一个
2).都有name属性text与password,text与input之间没有input(中间可以有其他元素,有name的text与password前后可以有input,如果其他的input也有name,name其他的name不能与正常的text的name相同(能够跟password相同))
3).id属性与name属性一样,当name与id混合时多余的input的name或者id不能与正常的text的name或者id同名
可以填充:
<div>
用户名:
<input type="text" placeholder="用户名" >
<p>hhhh</p>
<p>dsf</p>
<p>sfas</p>
<div>sdvgsdfgb</div>
密码:
<input type="password" placeholder="密码">
</div>
不可以填充:
<div>
用户名:
<input type="text" placeholder="用户名" >
<p>hhhh</p>
<p>dsf</p>
<input type="text" placeholder="用户名" >
<p>sfas</p>
<div>sdvgsdfgb</div>
密码:
<input type="password" placeholder="密码">
</div>
可以填充:
<div>
<input type="text" placeholder="用户名" ><input type="text" placeholder="用户名" >
<input type="text" placeholder="用户名" name="lll" >
<p>hhhh</p>
<p>dsf</p>
<p>sfas</p>
<div>sdvgsdfgb</div>
<input type="password" placeholder="密码" name="666">
<input type="text" placeholder="用户名" ><input type="text" placeholder="用户名" ><input type="text" placeholder="用户名" >
</div>
不可以填充:
<div>
<input type="text" placeholder="用户名" name="lll" >
<p>hhhh</p>
<p>dsf</p><input type="text" placeholder="用户名" ><input type="text" placeholder="用户名" >
<p>sfas</p>
<div>sdvgsdfgb</div>
<input type="password" placeholder="密码" name="666">
</div>
<div>
<input type="text" placeholder="用户名" name="lll" >
<p>hhhh</p>
<p>dsf</p><input type="text" name=name="22" >
<p>sfas</p>
<div>sdvgsdfgb</div>
<input type="password" placeholder="密码" name="666">
</div>
可以填充:
<div>
<input type="text">
<input type="text" placeholder="用户名" id="33">
<p>xcdfdf</p>
<input type="password" placeholder="密码" name="22">
</div>
可以:
<div>
<input type="text" id="22">
<input type="text" placeholder="用户名" id="33">
<p>xcdfdf</p>
<input type="password" placeholder="密码" name="22">
</div>
不可以
<div>
<input type="text" placeholder="用户名" id="33">
<p>xcdfdf</p>
<input type="password" placeholder="密码" name="22">
<input type="text" name="33">
</div>
二.解决自动填充的方法
其实根据上面的自动填充条件就可以解决这个问题,让他们不能满足自动填充的条件
比如增加一个input 并且使其name或者id等于text的name或者id,设置属性为隐藏(style='display:none')就可以了(参考上面的不可以)
其中有一个是有id或者name时,增加一个type为password时隐藏,如果该该input的name或者id与正常的text的name或者id相同的话,不起作用,必须得跟正常的password的name或者id相同
都没有id或者name属性时增加一个password并隐藏,也不能解决
接着就不会自动填充了,可是当鼠标移到密码框时会有下面的下拉框,要去掉下拉框
<input name="old-userName" type="text" style="display: none">
<input name="old-pwd" type="password" style="display: none">
<ul class="ul-info">
<li><label>账号:</label>
<input id="userName" type="text">
</li>
<li><label>密码:</label>
<input class="0" type="password">(不能有id或者name)
</li>
</ul>
关于网页中登录注册时input表单自动填充的笔记
最新推荐文章于 2024-04-13 22:45:00 发布