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 相关文章推荐
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
js css自定义分页效果
Feb 24 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
浅谈json_encode用法
2015/03/05 PHP
php计算整个目录大小的方法
2015/06/19 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
使用python实现简单五子棋游戏
2019/06/18 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
销售会计工作职责
2013/12/02 职场文书
不同意离婚答辩状
2015/05/22 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL