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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
Js 随机数产生6位数字
May 13 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 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
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
实例讲解PHP表单处理
2019/02/15 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
快速入门python学习笔记
2017/12/06 Python
python发送邮件脚本
2018/05/22 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python实现可逆简单的加密算法
2019/03/22 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
中学生学雷锋活动心得体会
2014/03/10 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
建国大业电影观后感
2015/06/01 职场文书
学子宴致辞大全
2015/07/27 职场文书
办公室日常管理制度
2015/08/04 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python