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

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

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

本人实验了三个浏览器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"/>

• 每个浏览器的自动填充都会有一些大同小异，我根据这三个浏览器来实验的。如果你觉得和你浏览器表现不同应该是版本原因。
• 就直接用直观的方法把，不用担心其他浏览器怎么样，如果还不行，就解决提出问题的人！哼哼