记录IE下一个bug,label下的图片聚焦表单元素失效
应该有很多朋友已经发现过这个神奇的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判断。
两个小插曲: