阻止浏览器对表单自动填充
来源:互联网 发布:中世纪2优化9火炮 编辑:程序博客网 时间:2024/05/21 16:25
当用户在进行登录等操作提交表单后,浏览器会提示是否允许浏览器记住密码。
记住用户名密码在一定程度上会给用户体验带来好处,比如,当用户在下一次打开此登录页面表单会自动填充,直接登录
然而,也会带来一定坏得影响,比如该网站下存在另外需要填充密码的表单时,不对应的密码和用户名会自动填充该表单上(大致表现为,密码输入框会自动填充所保存密码,密码输入框的上一个输入框会自动填充用户名),用户需要清空后再填写正确的用户名密码,使操作繁琐,用户体验差。
解决办法:
google之后发现据说 autocomplete=“off” 可以解决,但是chrome等不兼容,所以不可行。
猜想,浏览器自动填充识别的是 type="password" 然后将该input自动填入密码
那么,我们考虑将type=“password” 改为 type="text" ,然后再在必要的时候将其改回password
这个必要的时候我们选择在当密码的input获得焦点时,即在onFocus时改变type="password"
ok,我们组织代码如下
// 这里使用jquery
$("#psw").focus(function(event) { $(this).attr('type','password');});
ok,我们测试一下,诶,很顺利....诶???纳尼??lt ie8 ,ie8下无论怎样也不能修改到type的值
好吧,ie8以下行不通,寻找补救方案
既然不能修改,那么我们就插入新的input type="password" 进去,所以,前提我们要判断浏览器版本是小于ie8的版本
这里有一个很实用得办法
<!--[if lt ie9]><![endif]--> 这个标签大家都熟悉的多,而且它的特点是只有ie浏览器认识它,太棒了,就用它
var isLTIE9 = function(){ var bObj = document.createElement('b'); bObj.innerHTML = '<!--[if lt IE 9]><i></i><![endif]-->'; return bObj.getElementsByTagName('i').length === 1;}
这样我们就可以判断出小于ie9的ie浏览器了
汇总:
var isLTIE9 = function(){ var bObj = document.createElement('b'); bObj.innerHTML = '<!--[if lt IE 9]><i></i><![endif]-->'; return bObj.getElementsByTagName('i').length === 1;}if(!isLTIE9()) { $("#psw").focus(function(event) { $(this).attr('type','password'); });}else{ var pswInput = document.getElementById("psw"); var pswInput2 = pswInput.cloneNode(false); pswInput2.type='password'; pswInput.parentNode.replaceChild(pswInput2,pswInput);}
- 阻止浏览器对表单自动填充
- 【chrome】阻止浏览器表单填充
- 阻止HTML页面表单元素自动填充
- 一行代码,阻止浏览器自动填充密码
- 阻止浏览器记住密码功能干扰表单填充
- 阻止浏览器记住密码功能干扰表单填充
- 阻止浏览器记住密码功能干扰表单填充
- 禁止浏览器自动填充到表单
- 火狐浏览器表单自动填充问题
- 禁止chrome浏览器自动填充到表单
- 禁止浏览器自动填充到表单
- 浏览器自动填充表单导致网页样式丢失
- Chrome浏览器自动填充的表单如何去掉淡黄色背景???
- chrome浏览器自动填充表单导致输入框样式改变
- 禁止chrome浏览器自动填充表单的解决方案
- chrome浏览器表单自动填充默认样式-autofill
- 阻止自动表单提交
- html5自动填充表单
- QT5在VS2012中使用Qt Designer创建的UI文件与类相关联的问题
- xhtml
- ubuntu下 django的安装和升级,python的升级。
- apktool反编译时对AndroidManifest.xml的处理
- Java中的覆盖与隐藏
- 阻止浏览器对表单自动填充
- jquery tab面板插件
- 1009
- Activity活动介绍
- Unity多线程(Thread)和主线程(MainThread)交互使用类
- image and video processing听课笔记(三)
- weblogic 10 及以后版本引用 weblogic.jar
- 黑马程序员—OC(关于OC的一些简单介绍及使用)
- Android游戏开发是视频教程