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设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
javascript对象3个属性特征
Nov 17 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
smtp邮件发送一例
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python中查看文件名和文件路径
2017/03/31 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
python中栈的原理及实现方法示例
2019/11/27 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
python中安装django模块的方法
2020/03/12 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
如何利用cmp命令比较文件
2013/09/23 面试题
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
餐饮总经理岗位职责
2014/03/07 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
学校文明单位申报材料
2014/05/06 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
档案管理员岗位职责
2015/02/12 职场文书
该怎么书写道歉信?
2019/07/03 职场文书