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制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
php单一接口的实现方法
2015/06/20 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
React中this丢失的四种解决方法
2019/03/12 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
英文版银行求职信
2013/10/09 职场文书
加工操作管理制度
2014/01/19 职场文书
岗位职责的构建方法
2014/02/01 职场文书
家具促销活动方案
2014/02/16 职场文书
捐赠仪式主持词
2014/03/19 职场文书
师德演讲稿范文
2014/05/06 职场文书
营销计划书
2015/01/17 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
php去除deprecated的实例方法
2021/11/17 PHP
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL