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

2023年2月18日 253次阅读 来源: 汪小穆

前言：如果是同域名网站，并且曾经在该网站下登录过账号密码，并且选择了记住账号密码。chrome浏览器会对账号密码进行自动填充功能，虽然这功能给我们提供了很多方便，但是也带来了些困扰。

 

一、问题起始

①当“密码”那项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>

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

 

②当“密码”那项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>

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

这时会发现，浏览器对input进行了自动填充，而且背景颜色变成了淡黄色，这淡黄色的背景颜色是无法修改了。为什么把input的type改成password，就会发生自动填充呢？我的猜想是chrome浏览器对type=”password”进行了识别，并把”密码”项进行了填充，并且把“密码”项前面input当成了”账号”项进行了填充。

 

二、解决方法

<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”看执行效果。

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

这时候就可以发现，新添的两个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>

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

 

三、解决方法（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”)，发现也能解决这个问题，至于有无其他的衍生问题，博主并没有去检验了，觉得第一种方法太麻烦的朋友，不妨可以试试该种方法。

 

    原文作者：汪小穆
    原文地址: https://blog.csdn.net/w390058785/article/details/80512591
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞