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 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
Html5自定义字体解决方法
Oct 09 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
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
javascript动画效果类封装代码
2007/08/28 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
基于python生成器封装的协程类
2019/03/20 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
家长会主持词开场白
2014/03/18 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
个人合作协议书范本
2014/04/18 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
如何用python插入独创性声明
2021/03/31 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Go 内联优化让程序员爱不释手
2022/06/21 Golang