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


Posted in HTML / CSS onMay 07, 2023

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

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

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

使用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记住密码输入框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
CSS3 3D位移translate效果实例介绍
May 03 HTML / CSS
玩转CSS3色彩
Jan 16 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
使用CSS实现百叶窗效果示例代码
使用CSS实现按钮边缘跑马灯动画
使用CSS实现音波加载效果
table不让td文字溢出操作方法
Dec 24 #HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 #HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 #HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 #HTML / CSS
You might like
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
PHP取进制余数函数代码
2012/01/19 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
php while循环控制的简单实例
2016/05/30 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
用cssText批量修改样式
2009/08/29 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
浅谈python写入大量文件的问题
2018/11/09 Python
简单了解django索引的相关知识
2019/07/17 Python
解决python 上传图片限制格式问题
2019/10/30 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
俄罗斯游戏商店:Buka
2020/03/01 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
最常使用的求职信
2014/05/25 职场文书
大学生学习计划书
2014/09/15 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
支教个人总结
2015/03/04 职场文书
入党心得体会
2019/06/20 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
Python下opencv库的安装过程及问题汇总
2021/06/11 Python