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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
Vue 中使用 typescript的方法详解
Feb 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
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
js微信分享API
2020/10/11 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
面试自我介绍演讲稿
2014/04/29 职场文书
整改报告怎么写
2014/11/06 职场文书
葬礼主持词
2015/07/02 职场文书
小学思品教学反思
2016/02/20 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电