html运用(四) html解决浏览器记住密码输入框的问题
来源:互联网 发布:公司审批软件 编辑:程序博客网 时间:2024/06/08 05:51
在浏览器中提交表单后,浏览器一般会提示“是否需要记住密码”,确认后在下次提交表单的时候会自动填充某些输入框。
但是在某些情景下(例如在提现,充值的页面),自动填充密码就很不安全。需要采用一定的手段来阻止浏览器自动填充。
在解决的过程中遇到了一些坑,这里做一下笔记:
使用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
使用了最后一种方案后在各个浏览器中运行良好,暂时没发现出现自动填充的现象。果然前端的兼容性问题一直是一件让人恶心的事啊。。
0 0
- html运用(四) html解决浏览器记住密码输入框的问题
- 解决浏览器记住密码输入框的问题
- 解决浏览器记住密码输入框的问题
- 解决浏览器记住密码输入框的问题
- 解决浏览器记住密码输入框的问题
- 解决浏览器记住密码输入框的问题
- html页面禁止自动填充浏览器记住的密码
- 解决谷歌浏览器记住密码输入框颜色改变
- 谷歌浏览器记住密码之后,输入框变色问题
- 解决浏览器自动记住密码问题
- 解决浏览器记住用户名和密码问题
- 解决浏览器记住账户密码 运用readonly属性
- 使用随机生成的密码输入框,防止浏览器记住密码
- web系统解决Goole浏览器自动记住密码问题
- HTML的文本输入框、密码输入框
- 如何解决火狐和谷歌等浏览器自动记住用户名和密码的问题
- html文本输入框,密码输入框
- 360浏览器记住密码问题
- 阿里Dubbo的架构通信方式
- HTML中的几种定位方式
- PAT-B 1058. 选择题
- 屏蔽控制台应用程序的窗口#pragma comment(linker, "/subsystem:windows /ENTRY:mainCRTStartup")
- NetBeans启动失败,提示“JVM creation failed”的解决办法
- html运用(四) html解决浏览器记住密码输入框的问题
- vimrc 配置参考
- Python编码错误的解决办法SyntaxError: Non-ASCII character '\xe5' in file
- 浏览器加载网页的顺序和优化
- nginx学习(八)——nginx的配置系统4之healthcheck module
- Java 静态语句块、语句块、构造函数
- Camera 硬件结构介绍
- SAP中事务代码ME2N中引出的表格里,仍要Invoice数量是什么含义?
- maven install Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.1.1:war (default-wa