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 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python操作MongoDB详解及实例
2017/05/18 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python os.path模块常用方法实例详解
2018/09/16 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
python内存管理机制原理详解
2019/08/12 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
windows下python安装pip方法详解
2020/02/10 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
为什么使用接口?
2014/08/13 面试题
物流专业求职计划书
2014/01/10 职场文书
二手房买卖协议书
2014/04/10 职场文书
2014全年工作总结
2014/11/27 职场文书
失职检讨书大全
2015/01/26 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android