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

最新推荐文章于 2025-07-28 16:50:47 发布

原创最新推荐文章于 2025-07-28 16:50:47 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input #密码 #用户名 #自动填充

网页开发时遇业务问题专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了谷歌浏览器版本60.0.3112.90中自动填充功能的工作原理，包括输入框的类型、name及id属性对自动填充的影响，并提供了防止自动填充的具体方法。

一.自动填充的条件（谷歌浏览器 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>