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悬停效果案例应用
Nov 21 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
HTML中link标签属性的具体用法
May 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编程注意事项的小结
2013/04/27 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
简单的js表单验证函数
2013/10/28 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
Python 使用office365邮箱的示例
2020/10/29 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
什么是Web Service?
2012/07/25 面试题
项目开发计划书
2014/01/09 职场文书
毕业生自荐书
2014/02/03 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
户外活动总结范文
2014/04/30 职场文书
华山导游词
2015/02/03 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
签证工作证明模板
2015/06/15 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
Python 正则模块详情
2021/11/02 Python