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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
vue 项目常用加载器及配置详解
Jan 22 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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
php fckeditor 调用的函数
2009/06/21 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
基于ionic实现下拉刷新功能
2018/05/10 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
python实现计算资源图标crc值的方法
2014/10/05 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
python 网络编程常用代码段
2016/08/28 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
python如何将多个PDF进行合并
2019/08/13 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
环境工程毕业生自荐信
2013/11/17 职场文书
广告业务员岗位职责
2014/02/06 职场文书
葬礼司仪主持词
2014/03/31 职场文书
慰问信格式
2015/02/14 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
李强优秀员工观后感
2015/06/16 职场文书