标签搜索

目 录CONTENT

文章目录

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

沙漠渔溏 / 2024-01-25 12:49:40 / 共计1,930 字
温馨提示:
本文最后更新于 2024-01-25,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

在浏览器中提交表单后,浏览器一般会提示“是否需要记住密码”,确认后在下次提交表单的时候会自动填充某些输入框。

但是在某些情景下(例如在提现,充值的页面),自动填充密码就很不安全。需要采用一定的手段来阻止浏览器自动填充。

在解决的过程中遇到了一些坑,这里做一下笔记:

使用HTML属性 autocomplete="off"

由于自动填充这个特性是浏览器自己实现的,autocomplete这个属性也没有被写入W3C规范。很多浏览器都会直接忽略这个属性。无法禁用自动填充。

使用js在页面加载的时候设置input的value为空
很自然能想到的一个办法,但是浏览器的自动填充居然是在js执行完后再填充的。。。在使用js设置了input的value为空后,浏览器又把input自动填充,无法解决问题。

增加<input type=”password”/>

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

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

增加form

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

<!-- 额外增加的form和input -->
<form style="display:none">
  <input type="password"/>
</form>
<!-- 原先的input -->
<input type="password"/>

最终解决方案

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

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

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

Summary

使用了最后一种方案后在各个浏览器中运行良好,暂时没发现出现自动填充的现象。果然前端的兼容性问题一直是一件让人恶心的事啊。。

到此这篇关于html解决浏览器记住密码输入框的问题的文章就介绍到这了,更多相关 html记住密码输入框内容请搜索 『沙漠渔溏』 以前的文章或继续浏览下面的相关文章,希望大家以后多多支持 『沙漠渔溏』 !