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 constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
深入探寻javascript定时器
Jan 02 Javascript
js点击选择文本的方法
Feb 09 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
TensorFlow神经网络优化策略学习
2018/03/09 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Python 如何实现访问者模式
2020/07/28 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
《梅兰芳学艺》教学反思
2014/02/24 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
校友回访母校寄语
2015/02/26 职场文书
施工员岗位职责范本
2015/04/11 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python