如何真正解决浏览器给输入框input自动填充密码

我们在使用浏览器的过程中，经常会保存一些账户和密码。如下图所示，可以在自动填充中查看：

这个方式为我们大大减轻了需要记忆多个用户名和密码的负担。
但对于开发人员来说，也带来了些小困扰。
一、问题
input的type是text等类型时，一切正常。
而当你将你的input的type改成password的时候，问题就出现了。

<input type="password"  class="form-sty" placeholder="请输入密码" id="password" value=""/>

这时候，你就能看到，浏览器对input进行了自动填充，并改变了input的样式。如下图：

二、解决办法
我上网查询了其他人的解决办法，发现主要有两种。

方法一：在input中加入autocomplete=“new-password”，此方法解决了我的问题

autocomplete是HTML5的一个新属性。默认自动填入，介绍使用方式是autocomplete="off"即可，但对这里的自动填充并没有效果，反而填入autocomplete="new-password"产生了效果，我猜测是确认为新的一个password，所以不予填充旧密码。代码及效果如下：

   <input type="password" autocomplete="new-password" placeholder="请输入密码" id="password" value=""/>

方法二：在input前加入新的input（type也为password），此方法未解决我的问题
在"密码"项前面添加多两个input标签，并新添的第二个input标签的type=“password”。

新添的两个input标签就被自动填充了，而原有的"密码"框不会被进行自动填充。
最后只需要把前面两个input进行隐藏就可以了。