> css教程 > css >

解决chrom浏览器input密码框自动填充

来源:网络 文章列表 2020-03-05 8
如果是同域名网站,并且曾经在该网站下登录过账号密码,并且选择了记住账号密码。chrome浏览器会对账号密码进行自动填充功能,虽然这功能给我们提供了很多方便,但是也带来了些困扰。

前言:如果是同域名网站,并且曾经在该网站下登录过账号密码,并且选择了记住账号密码。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>

②当“密码”那项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当成了"账号"项进行了填充。

 

二、解决方法

<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;的方式进行“隐藏”能很好的解决这个问题)。另外还可以尝试将父元素利用 opacity: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>

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

此种方法我在element-ui里试了,没啥用。但是网上很多人说这种方式可行。如果你没有解决的话,可以尝试下,能否解决你的问题。

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接