消除浏览器对input输入框的自动填充
Mozilla官方文档建议的是 直接使用 autocomplete = ‘off’ 即可禁止输入框从浏览器cache获取数据,博主以前使用这个也就足够兼容浏览器了。
现在发现,却在chrome、firfox上有兼容性 无法解决。
后来查阅相关资料得到以下解决方法:
1:可以设置一个默认的input用来接收浏览器的默认填充,并且设置css为dispaly:none
形如:
<input type = 'text' style='display:none'>
这样既不会影响用户的体验,也可以兼容所有的浏览器,但经过测试却发现,在chrome上不起作用,在firefox上也只能对type != password的 输入框起作用。
2:autocomplete = 'new-password'
<input type='text' >
<input type='password' autocomplete='new-password' >
使用上诉代码,在chrome上既可生效,用户名与密码都不会自动填充,但是firefox上任然会自动填充用户名
3:结合上诉两个情况
<input type='text' style='display:none'> <!-- 针对firefox -->
用户名:<input type='text' autocomplete='off'>
密码:<input type='password' autocomplete='new-password'>
既可解决针对chrome与firefox内核的浏览器自动填充输入框的问题
4:但是近期经过测试发现 这种方法还是不能解决firefox上密码框的历史输入,可以:3步骤上做这样的操作:
<input type='password' autocomplete="new-password" style="background-color: #FFFFFF!important;" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);" />>
消除浏览器对input输入框的自动填充的更多相关文章
- 消除浏览器对input的自动填充
		
在做登录相关的页面时,常遇到这样的现象,浏览器input的自动填充行为. 原因 设置 input 的 type 属性为 password 后,当页面进行过提交,并且允许浏览器记住密码后,那么再次加载该 ...
 - 解决手机浏览器上input 输入框导致页面放大的问题(记录)
		
在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...
 - chrome下input文本框自动填充背景问题解决
		
chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...
 - 关于chrome浏览器的帐号密码自动填充以及出现的黄色背景色填充问题
		
不知道大家平时做项目的时候有木有关注这个问题,其实之前做项目遇到过类似的问题,但是因为是单独的chrome浏览器的填充,而且是样式问题稍微严重点,也就没在意.然而在近期的项目中有遇到了这个问题,最为一 ...
 - 清除ie10+浏览器的input输入框后面会出现的x号和闭眼logo
		
x号:::-ms-clear{display:none;} 闭眼logo: ::-ms-reveal{display:none;} tips:如果在外部引用的css里面没有作用,可以在写本页面的< ...
 - 用户登录记住用户名导致表单自动填充bug解决方法
		
最近做项目出现了一个极其讨厌的bug:在用户登录网站时,浏览器会自动提示是否记住密码,当选择记住密码时,正常浏览网页,会发现有那么几个input输入框会自动填充用户名,非常讨厌, 于是就觉得挺简单的一 ...
 - input placeholder 在chrome 浏览器自动填充时,背景色覆盖原有背景图片问题。
		
user-block-name, .user-block-pwd { margin-bottom: 10%; text-align: center; position: relative; } .us ...
 - 解决input框自动填充为黄色的问题
		
题原因:input 框会自动填充一个颜色 如图所示 解决方法 :通过动画去延迟背景颜色的显示 代码如下 input:-webkit-autofill, textarea:-webkit-auto ...
 - input标签自动填充问题
		
<input type='text' placeholder='手机号' /> <input type='text' placeholder='地址' /> <input ...
 
随机推荐
- win7 eclipse设置Courier New字体
			
win7系统 1.控制面板-->字体.找到Courier New 字体,右键->显示,这种字体就开始变亮了. 2.eclipse里设置: windows-->Preferences- ...
 - DevOps简单介绍
			
jenkins作为测试环境代码发布工具,sonar作为静态代码检查工具,idea作为开发工具,jira作为缺陷管理平台,upstream作为code review工具(正在研究).DevOps最近比较 ...
 - 设置小窗口Activity
			
http://blog.csdn.net/xieyihua1994/article/details/52586270 我们知道Activity本身是没有界面的.所以activity类创建了一个窗口,开 ...
 - [Android] 录音与播放录音实现
			
http://blog.csdn.net/cxf7394373/article/details/8313980 android开发文档中有一个关于录音的类MediaRecord,一张图介绍了基本的流程 ...
 - 20145324 《Java程序设计》第8周学习总结
			
20145324 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 1.NIO使用频道来衔接数据节点,可以设定缓冲区容量,在缓冲区中对感兴趣的数据区块进行标记,提供clear ...
 - 实现在vista和win7中使用管理员权限接收WM_DROPFILES(OnDropFiles())消息的方法(好像XP不支持这个函数)
			
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 #pragma once #ifndef WM_COPYGLOBALD ...
 - poj 2187:Beauty Contest(旋转卡壳)
			
Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 32708 Accepted: 10156 Description Bes ...
 - vCenter Server 6.7 集成 vRealize Orchestrator 7.5
			
第一步,安装独立Orchestrator 7.5,并初始化 Orchestrator ova导入和初始化步骤省略...请参考官方文档... Orchestrator 初始化中的认证源需要和vCen ...
 - Linux系统CentOS使用yum方式安装指定版本的PHP 添加yum源 从PHP5.3升级到5.4/5.5/5.6
			
默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 首先删除旧版本的PHP, 通过yum list installed | grep php可以查看所有已安装的php软件 使 ...
 - LeetCode——Coin Change
			
Question You are given coins of different denominations and a total amount of money amount. Write a ...