关于网页中登录注册时input表单自动填充的笔记

一.自动填充的条件(谷歌浏览器 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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值