记录IE下一个bug，label下的图片聚焦表单元素失效

作者: 阿肆 发表时间: August 20, 2009 分类: WebBuild 11条评论

应该有很多朋友已经发现过这个神奇的BUG，此BUG在IE5.5-IE8下通吃，就是当label中是图片元素的时候，无法通过点击该图片来激活绑定的表单元素，请用IE看这里>>

已有朋友提供使用添加元素+背景图+绝对定位遮盖的方法来解决这个问题，请看这里>>

这种办法在使用中可能比较麻烦，因为图片极大的可能性是不一样的，并且一般背景图和页面图片会存放在不同的文件夹甚至服务器上，加上设计者的权限等乱七八糟的问题，可能麻烦性更大。

还有一种方法就是可以使用js来实现，比较简单，虽然在无js支持的情况下会失效。我想的是：js都不支持的浏览器也不在乎多这点可访问性的牺牲。（接受异议）

基本代码：

<script type="text/javascript">
        var lb=document.getElementsByTagName('label');
        for (i=0;i<lb.length;i++) {
            lb[i].onclick=function () {
                var lbfor=this.getAttribute('for')?this.getAttribute('for'):this.getAttribute('HTMLfor')+'';
                document.getElementById(lbfor).click();
                document.getElementById(lbfor).focus();
            }            
        }
    </script>

可以通过这里查看>>

事件处理比较简单，你可以自己修改针对不同类型的表单元素使用switch来触发条件，对于checkbox框再来判断是否选正等，我省略了这些，就在js前加了IE判断。

两个小插曲:

  1. 在IE下使用getAttribute获得的值类型是Object，需要处理下，关于这点请参考rank的这篇文章
  2. 感谢屈屈提示在IE8以下版本的IE无法直接通过some.getAttribute('for')的方法获取到for的值，因为for是保留字，类似的还要class，需要使用HTMLfor。

Tags: IE, 前端, label, img

已有 11 条评论

  1. #1 JK Says:

    August 21st, 2009 at 02:52 pm

    labelFor里的img无效

    img disabled掉就可以

  2. #2 JK Says:

    August 21st, 2009 at 02:56 pm

    回复评论里把《》给过滤掉了，晕哦

  3. #3 ball valve Says:

    August 22nd, 2009 at 03:03 pm

    学习了........

  4. #4 阿肆 Says:

    August 24th, 2009 at 02:47 pm

    谢谢@JK 提供的方法，确实有效，并且很方便。

  5. #5 exchange Says:

    September 14th, 2009 at 07:14 pm

    感谢你的分享

  6. #6 蒙奇奇 Says:

    September 27th, 2009 at 03:43 pm

    原来是这样啊，我就说怎么搞了半天都出不来，谢谢了哈

  7. #7 kangre Says:

    October 10th, 2009 at 02:42 am

    我看了很久了，还是不懂，我还是专注HTML算了

  8. #8 感受生活 Says:

    October 11th, 2009 at 03:57 pm

    呵呵，又学了点东西

  9. #9 yoom Says:

    March 29th, 2010 at 02:06 pm

    http://bbs.blueidea.com/thread-2978352-1-1.html
    这个地址也有个解决办法，不过用了滤镜。

添加新评论

评论