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简易缓动插件(源码打包)
Feb 16 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
video.js添加自定义组件的方法
Dec 09 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的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php 实现进制相互转换
2016/04/07 PHP
php实现微信企业转账功能
2018/10/02 PHP
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python的装饰器使用详解
2017/06/26 Python
python版大富翁源代码分享
2018/11/19 Python
python调试神器PySnooper的使用
2019/07/03 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
Python爬虫开发与项目实战
2020/12/16 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
大学生文员专业个人求职信范文
2014/01/05 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
辩护意见书
2015/06/04 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python