禁止浏览器保存密码和禁止浏览器填充密码
浏览器保存密码是根据 input="password" 来判断的, 所有我们只要保证浏览器在 dom 结构中识别不到密码框即可.
so:
-->密码输入位置默认为 input="text".
-->在输入框上添加 onfocus="this.type='password'" 输入框获得焦点时改变输入框格式为密码框
-->输入密码
-->在提交前清空输入框密码, 并修改密码框为文本框.(我的提交为发生 Ajax 提交, 可根据自己实际情况进行调整, 或者情况密码之后, 将值保存在一个隐藏域中, 再提交表单)
-->commit.
1. 使用此方法即可在进入界面时浏览器不填充密码, 也不会在提交之后保存密码.
2. IE8+,Chrome,FF,360 测试通过.
3. 其实写这段代码的时候只是为了禁止 Chrome 保存密码, 对于其他浏览器只是验证是否正常显示.
4. 次方法不针对通过 JS 向密码框输入密码的情况, 因为 JS 输入不触发获得焦点事件
浏览器保存密码有时会导致一些奇葩问题, 比如本该填写数额的地方浏览器自作主张的给你填上了帐号, 即使加载时清空, 双击仍然会以下拉框的方式供你选择. 所以最后我决定直接禁掉保存密码功能, 实现起来却还是遇到了麻烦: 包括设置 autocomplete 为 off(此方法已确定无效), 动态设置 password 属性等方法都有各种各样的兼容问题, 要么谷歌, 要么火狐, 要么 IE 的高低版本. 最后解决方法如下, IE,EDGE,FF,Chrome 测试通过: 密码框 type 设置为 password, 设置一个隐藏域, 在表单提交前将密码框的 value 填入隐藏域 -->把密码框的 value 替换为圆点 (Chrome 的圆点比较小, 百度可以找到)--> 把密码框的 type 改为 text-->提交表单, 完成.
- <input type="password" name="txtPassword" style="display:none">
- <input type="password" name="txtPassword" placeholder="请输入密码" autocomplete="off"
- />
- <input type="password" style="display:none;width:0;height:0;">
- <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="请输入密码">
先输入一个隐藏文本域, 再输入第二个展示的文本框, 重点是我加黑的字体, 编译器可能会无法识别, 但是浏览器可以解析
来源: http://www.bubuko.com/infodetail-2961208.html