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处理VBArray的函数使用说明
May 11 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
js实现登录时记住密码的方法分析
Apr 05 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
JS 实现百度搜索功能
2018/02/01 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
Python计算回文数的方法
2015/03/11 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
工作转正自我鉴定范文
2019/06/21 职场文书
导游词之无锡梅园
2019/11/28 职场文书
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL