【html】巧妙解决input标签自动填充问题

前言：若是是同域名网站，而且曾经在该网站下登陆过帐号密码，而且选择了记住帐号密码。chrome浏览器会对帐号密码进行自动填充功能，虽然这功能给咱们提供了不少方便，可是也带来了些困扰。

 
1、问题起始
①当“密码”那项input的type是text的时候并不会出现问题

<label>
<span>卡号:</span>
<input type="text" name="userName" placeholder="请输入卡号" autocomplete="off">
</label>
<label>
<span>密码:</span>
<input type="text" name="password" placeholder="请输入密码" autocomplete="off">
</label>

 

②当“密码”那项input的type改为password的时候，问题就出现了。

<label>
<span>卡号:</span>
<input type="text" name="userName" placeholder="请输入卡号" autocomplete="off">
</label>
<label>
<span>密码:</span>
<input type="password" name="password" placeholder="请输入密码" autocomplete="off">
</label>

这时会发现，浏览器对input进行了自动填充，并且背景颜色变成了淡黄色，这淡黄色的背景颜色是没法修改了。为何把input的type改为password，就会发生自动填充呢？个人猜测是chrome浏览器对type="password"进行了识别，并把"密码"项进行了填充，而且把"密码"项前面input当成了"帐号"项进行了填充。

 
2、解决方法
<label><span></span><input type="text" name="hidden1" ></label>
<label><span></span><input type="password" name="hidden2" ></label>
<label>
<span>卡号:</span>
<input type="text" name="userName" placeholder="请输入卡号" autocomplete="off">
</label>
<label>
<span>密码:</span>
<input type="password" name="password" placeholder="请输入密码" autocomplete="off">
</label>
向这样，在"帐号""密码"项前面添加多两个input标签，并新添的第二个input标签的type="password"看执行效果。

 

这时候就能够发现，新添的两个input标签就被自动填充了，而"帐号""密码"框再也不会被进行自动填充了，不可贵出chrome浏览器只对带password的前两个input标签自动填充。最后只须要进行收尾，把前面两个input进行隐藏就能够了。（经过网友的反馈：直接经过display进行隐藏的话，第二password仍是会出现密码提示，可是经过width:0; height:0;的方式进行“隐藏”能很好的解决这个问题）。

<label><span></span><input type="text" name="hidden1" style="width:0; height:0;"></label>
<label><span></span><input type="password" name="hidden2" style="width:0; height:0;"></label>
<label>
<span>卡号:</span>
<input type="text" name="userName" placeholder="请输入卡号" autocomplete="off">
</label>
<label>
<span>密码:</span>
<input type="password" name=password" placeholder="请输入密码" autocomplete="off">
</label>

 

3、解决方法（2）
<label>
<span>卡号:</span>
<input type="text" name="userName" placeholder="请输入卡号" autocomplete="new-password">
</label>
<label>
<span>密码:</span>
<input type="password" name=password" placeholder="请输入密码" autocomplete="new-password">
</label>
有网友提供了新的方法来解决该问题(经过给input标签条件autocomplete="new-password")，发现也能解决这个问题，至于有无其余的衍生问题，博主并无去检验了，以为第一种方法太麻烦的朋友，不妨能够试试该种方法。
————————————————
版权声明：本文为CSDN博主「汪小穆」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处连接及本声明。
原文连接：https://blog.csdn.net/w390058785/java/article/details/80512591