IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点


Posted in Javascript onDecember 27, 2009

公司WEB项目要求是必须兼容FF3,IE6/7/8。本文所述为IE6下的一个BUG.

项目里面写了一个自己封装的弹出层,原理是先动态添加一个遮罩层,再动态添加一个DIV(Table)层(做弹出层的PNG半透明边框效果),DIV里面动态添加一个IFrame,这个Iframe页面指向一个现存的HTM文件。

如果这个HTM文件中,包含文本输入框这样的一些表单元素,在IE6下就会出娄子了。

测试组的人说了,弹出层打开后,“经常”无法获取文本框的焦点,就是鼠标点文本框无法获取焦点并显示输入标记,仿佛被什么透明层给盖住了。但有时是正常的,可谓间歇性精神障碍。有的机子上百分之五十的几率出现,有的机子上百分之三十左右的几率出现。

少不了得做一番测试和分析了。

经我在虚拟机IE6测试,也发现的确如测试组的人所说。

我确信不可能有多余的覆盖层,因为除文本框之外,它周围的任何文字都可以正常的用鼠标选中,它周围的任何元素包括这个文本框本身也能响应onclick事件,只是无论怎么点,都无法获取输入焦点。(文本框没有设置readOnly或者disabled)

但是,某些小动作就可以让它们恢复正常,比如在这个Iframe里右键刷新一下,或者是在这个Iframe里按'TAB'键将焦点切换到任何一个文本框,这时,所有的文本框都可以用点击正常获得焦点了。还真是变态!

咱总不能说这是IE6的BUG我们程序无法解决吧,领导是不听这话的。

经过一番努力,还是有了解决方案。

我发现,手动调用一下任何一个(通常是第一个)文本框的focus()方法就可以让所有的文本框恢复神智了。于是写了一个公共脚本,在Iframe内的页面末尾,获取第一个文本框并调用其focus(),经测百来次,再没碰见无法获取焦点的情况,问题解决。

下面是网友回复:
弹出的那个标签是<a />标签吧?
换成<span />标签似乎就OK了

Javascript 相关文章推荐
js不是基础的基础
Dec 24 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
JavaScript 拾漏补遗
Dec 27 #Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 #Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 #Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 #Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 #Javascript
jQuery中的常用事件总结
Dec 27 #Javascript
jQuery 动态酷效果实现总结
Dec 27 #Javascript
You might like
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
django2 快速安装指南分享
2018/01/05 Python
python如何实现一个刷网页小程序
2018/11/27 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python实现DDos攻击实例详解
2019/02/02 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
面料业务员岗位职责
2013/12/26 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
酒店员工培训方案
2014/06/02 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书