去除浏览器自动记住密码功能

最近由于公司在开发金融项目，对各方面要求比较严格，然而发现第一次在谷歌浏览器和火狐浏览器上登陆账户的时候，都会自动弹出记住密码的弹框：如下图

（1）谷歌和火狐浏览器上的弹框：
   

点击了保存之后就会存到浏览器的记录里，分别再Google：设置 -> 高级 -> 管理密码 -> 已保存的密码 中和 FireFox：选项 -> 隐私与安全 -> 表单密码 -> 已保存的登陆信息 中 找到对应信息，并且可以查看（存在的风险自己估量）

（2）当你再次登陆的时候就会自动填充到表单账号密码中：如下图

   

点击提示信息后，就会把对应的信息填充到表单中

我再网上搜了好多关于这方面的信息，都逐个尝试，发现很多方法都不靠谱，也可能是是我理解的不够透彻，各位博友如果有好的解决方案可以直接 Email me！或者直接在下面留言。

下面就附上我的解决方案，经测试已经完美生效：

1、对于chorme浏览器：

简单来说就是在表单的容器最前面和最后面各加一个看不见的input框，type类型设置为password，需要注意的是：不能给它设置成 display：none；，否则就不会生效，可以设置 宽高为0，opacity：0； 最后再定个位，定到某个不容易被别人注意的小角落里就OK了！

2、对于FF浏览器：

简单来说就是先给密码框type类型设置成text，然后再聚焦的时候改成password类型，然后在提交之前把密码框的值清空，然后再把密码框的type类型改成text类型，就OK了！

附上我的代码截图：

提交时操作：

到此为止，chrome上和FF上，首次登陆就不会弹出那个弹框了！

---

难道到此就结束了？NO!（大写的！），解决一个问题就要搞懂他的原理和机制！（个人通过（N+1次）测试理解的结果，仅代表个人观点哦）

划重点：

chrome： 通过检测input框type的password属性来”监视“你是否提交了表单，但是它比较傻，只要在提交前给它一个空的密码框，他就会“关注”这个密码框，然后在提交的时候，它会关注最后一个密码框，但是中间有几个密码框它就不管了，也就是说只要保证这两个密码框值为空，就不会触发浏览器自带的那个记住密码的提示！over！

FireFox：：同样是通过检测input框type的password属性来”监视“你是否提交了表单，但是FF却关注了密码框的初始type值password，并没有关注中间发生了什么”不可描述的事“，所以根据这些我就可以从中间做文章了，具体我就不说了，上面很清楚了！over！

OK，扯完了，如果有什么不对的地方，还请各位大牛多多指正！

小伙伴们如果有好的解决方法可以直接再下面留言哦！

注：我测试代码的浏览器版本分别是：
Google：63.0.3239.108（正式版本）（32 位）
FireFox：57.0.3 (32 位)