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 相关文章推荐
Javascript中的isNaN函数使用说明
Nov 10 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
javascript 中的继承实例详解
May 05 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
详解TypeScript的基础类型
Feb 18 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
第七节--类的静态成员
2006/11/16 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php数组和链表的区别总结
2019/09/20 PHP
取得父标签
2006/11/14 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
js编写简单的聊天室功能
2017/08/17 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python 数据处理库 pandas进阶教程
2018/04/21 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Django数据统计功能count()的使用
2020/11/30 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
《和我们一样享受春天》教学反思
2014/02/07 职场文书
美术指导助理求职信
2014/04/20 职场文书
学校师德承诺书
2014/05/23 职场文书
模具专业求职信
2014/06/26 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
母亲节主题班会
2015/08/14 职场文书