如何禁止浏览器自动保存密码表单？

更新日期: 2019-04-29阅读: 8.8k标签: 表单分享

复制链接

新浪微博

QQ 好友

扫一扫分享

为了帐号和密码安全，作为程序员，如何不让浏览器自动记住密码呢？浏览器有时总是自动填充用户和密码，怎么屏蔽呢？浏览器保存密码是根据input="password"来判断的，所有我们只要保证浏览器在dom结构中识别不到密码框即可。

方法一：

-->密码输入位置默认为input="text"。
-->在输入框上添加 onfocus="this.type='password'" 输入框获得焦点时改变输入框格式为密码框
-->输入密码
-->在提交前清空输入框密码，并修改密码框为文本框。（我的提交为发生Ajax提交，可根据自己实际情况进行调整，或者情况密码之后，将值保存在一个隐藏域中，再提交表单）
-->commit。

1. 使用此方法即可在进入界面时浏览器不填充密码，也不会在提交之后保存密码。
2. IE8+、Chrome、FF、360测试通过。
3. 其实写这段代码的时候只是为了禁止Chrome保存密码，对于其他浏览器只是验证是否正常显示。
4. 次方法不针对通过js向密码框输入密码的情况，因为js输入不触发获得焦点事件。

方法二：

IE、EDGE、FF、Chrome测试通过：密码框type设置为password，设置一个隐藏域，在表单提交前将密码框的value填入隐藏域——>把密码框的value替换为圆点（Chrome的圆点比较小，百度可以找到）——>把密码框的type改为text——>提交表单，完成。

<input type="password" name="txtPassword">
<input type="password" name="txtPassword" placeholder="请输入密码" autocomplete="off" />

谷歌浏览器比较吊，只加上一个隐藏密码框还是不行的，把两个密码框名字改成一样的就好了。

方法三：

再给大家分享先输入一个隐藏文本域，再输入第二个展示的文本框，重点是 autocomplete="new-password" ，编译器可能会无法识别，但是浏览器可以解析

<input type="password">

<input data-placeholder="请输入密码" name="password" data-required="true" type="password" autocomplete="new-password" data-max-length="50" tabindex="2" spellcheck="false" id="auto-id-1505904797992" placeholder="请输入密码">

方法四：

默认添加readonly属性，当获取焦点时候取消该属性。该方法类似于方法一。

<input type="text" placeholder="账号" readonly onfocus="this.removeAttribute('readonly');"/>

链接: https://fly63.com/article/detial/3132