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实现计算代码行数的简单方法附代码
Aug 13 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
JS实现网页端猜数字小游戏
Mar 06 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
微信access_token的获取开发示例
2015/04/16 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
深入理解Python3 内置函数大全
2017/11/23 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python打开文件的方式有哪些
2020/06/29 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
教师的实习鉴定
2013/12/15 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
高三生物教学反思
2014/01/25 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
实训报告范文大全
2014/11/04 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript