解决浏览器自动填充账号密码行为

这东西真的不是程序员的问题,但是没办法拿着别人的给的钱就必须解决。
如果你很急,就直接跳到最后一个看解决办法。

首先为什么会出现这种情况

本人实验了三个浏览器360浏览器、火狐浏览器、谷歌浏览器(都是最新版)
用户在登录网站时,登陆成功后浏览器会显示是否保存密码,有一个保存和一律不的选项。

点击保存,大部分浏览器会记住用户登陆时输入用户名的input标签中属性type的值,同时也记住输入密码的input标签中属性type的值。

But
360浏览器应该是也会记住input中的name值,因为试了一下改name值也可以达到不让浏览器自动填充的效果,但是火狐和谷歌并没有用(找不到官方的说法,我只能通过表现来猜测)。

因此大部分浏览器保存密码之后,下次会在相同属性的input框中填充用户名和密码。这样就容易出现用户在有账号并且点了浏览器保存的前提下,再次注册时,验证码框和输入密码框被浏览器填充之前的账号密码(我猜测是浏览器检测到input属性是text并且下一个input属性又是password的原因)

360浏览器那种是需要input的type和name属性相同才会填充。

火狐和谷歌浏览器解决办法

只需要给输入密码的input标签加一个属性就可以:

<input type="password" name="password" autocomplete="new-password" />
不需要为输入登录名的input标签做更改

360浏览器解决办法

首先我先使用的是改name的属性
我是想要看一下浏览器是否都会保存name属性来判断从而填充密码的想法,如果说都会判断name来填充的话那么我把name名字区分就不会在有这种情况,很可惜答案告诉我并不是。
以下是实验步骤

这是原来记住的input:
<input name="name" type="text"/>
<input name="password" type="password"/>
改成:
<input name="plname" type="text"/>
<input name="plpassword" type="password"/>
目的达到浏览器不会填充
再试一下到底浏览器是不是会记录name的值
<input name="plname" type="text"/>
<input name="password" type="password"/>
密码填充了,用户名没填充,应该算是证实了我的想法
但是谷歌和火狐并并不会记录input的name属性。

那么我把两种办法结合呢?

<input name="plname" type="text" />
<input name="password" type="password" autocomplete="new-password"/>
360浏览器把autocomplete="new-password"看作强制填充密码,无论name值怎么改都会把记住的用户账号密码填入
这样改name的值就不起作用,两个方法相斥就很难受。

最直观的方法

直接添加隐藏的input框给浏览器填充
<input name="name" type="text" style="z-index: -10;height: 1px;"/>
<input name="password" type="password" style="z-index: -10;height: 1px;"/>
复制一组input用于给浏览器自动填充用户名和密码,记住一定不能隐藏diplay:none,隐藏过后还会将下面的框赋值。
所以使用层级关系挡住input,把高度变不变小看你们的需求
<input name="name" type="text"/>
<input name="password" type="password"/>
  • 每个浏览器的自动填充都会有一些大同小异,我根据这三个浏览器来实验的。如果你觉得和你浏览器表现不同应该是版本原因。
  • 就直接用直观的方法把,不用担心其他浏览器怎么样,如果还不行,就解决提出问题的人!哼哼
发布了31 篇原创文章 · 获赞 45 · 访问量 5903

猜你喜欢

转载自blog.csdn.net/weixin_43623808/article/details/102876694