html解决浏览器记住密码输入框的问题

甜蜜家园2024

在浏览器中提交表单后，浏览器一般会提示“是否需要记住密码”，确认后在下次提交表单的时候会自动填充某些输入框。
但是在某些情景下（例如在提现，充值的页面），自动填充密码就很不安全。需要采用一定的手段来阻止浏览器自动填充。
在解决的过程中遇到了一些坑，这里做一下笔记：
使用HTML属性 autocomplete="off"

由于自动填充这个特性是浏览器自己实现的，autocomplete这个属性也没有被写入W3C规范。很多浏览器都会直接忽略这个属性。无法禁用自动填充。
使用js在页面加载的时候设置input的value为空
很自然能想到的一个办法，但是浏览器的自动填充居然是在js执行完后再填充的。。。在使用js设置了input的value为空后，浏览器又把input自动填充，无法解决问题。
增加<input type=”password”/>

网上流传甚广的一个方法。这个方法在大部分版本的浏览器上是可行的，但是在某些高版本的浏览器和Safari中失效。后面介绍的几种方法都是基于这个方法的改进。

1. <!-- 额外增加的input -->
   
2. <input type="password" style="display:none"/>
   
3. <!-- 原先的input -->
   
4. <input type="password"/>

复制代码

增加form

这个方法较上面那个解决了Safari下自动填充的问题。但是在某些高版本Chrome下失效。（经测试Chrome 46.0可行，Chrome 47.0失效）

1. <!-- 额外增加的form和input -->
   
2. <form style="display:none">
   
3.   <input type="password"/>
   
4. </form>
   
5. <!-- 原先的input -->
   
6. <input type="password"/>

复制代码

最终解决方案

这个方案结合了上面两种方法，最终连Chrome 47.0下自动填充的问题也解决掉。

1. <!-- 额外增加的内容 -->
   
2. <form style="display:none">
   
3.   <input type="password"/>
   
4. </form>
   
5. <input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
   
6. <!-- 原先的input -->
   
7. <input type="password"/>

复制代码

这个方法中需要注意的是与目标input同辈的input不能设置成 display:none，如果设置后再Chrome 47.0上会自动填充，因此只能使用其他手段把这个input隐藏。
Summary

使用了最后一种方案后在各个浏览器中运行良好，暂时没发现出现自动填充的现象。果然前端的兼容性问题一直是一件让人恶心的事啊。。
到此这篇关于html解决浏览器记住密码输入框的问题的文章就介绍到这了,更多相关 html记住密码输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

無心彈奏

每日一回

bobo7515

谢谢你分享这个信息

武爷灬

确实牛逼

达瓦卓玛

这个话题真是有趣，我也对它感兴趣。

清河桥士

友善的讨论氛围是非常重要的。

466892478

我不确定这个信息的准确性，请再确认一下

伟栋他爹

同意！

不明世事

谢谢你分享这个信息