IE浏览器下的label局限性
今天在调一个应用的模板的时候，发现了在 IE 浏览器下，如果我们将图片包含到 label 内，那么，点击图片将无法触发控件，从而导致焦点不能转到相应的表单控件上。
首先简要的说下 label 标签，它的主要作用是向控件定义标注（标记）。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。label 标签有一个可选属性 – for，它用来定义 label 针对哪个表单元素，设置为某个表单元素的 id。另外，如果此属性未被规定，那么 label 会关联其内容。
先看一个简单的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <ul> <li><input id="r1" name="r1" type="radio" /><label for="r1">点此选中radio</label></li> <li><input id="r2" name="r1" type="radio" /><label for="r2">点此选中radio</label></li> <li><input id="r3" name="r1" type="radio" /><label for="r3">点此选中radio</label></li> </ul> </body> </html>
现在我们将文字改为图片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <ul> <li><input id="r1" name="r1" type="radio" /><label for="r1"><img src="http://www.csser.name/images/logo.gif" /></label></li> <li><input id="r2" name="r1" type="radio" /><label for="r2"><img src="http://www.csser.name/images/logo.gif" /></label></li> <li><input id="r3" name="r1" type="radio" /><label for="r3"><img src="http://www.csser.name/images/logo.gif" /></label></li> </ul> </body> </html>
大家可以将这段代码在各浏览器中测试，Firefox、Opera、Safari、Google Chrome 都能正常触发控件，在 IE 6、IE 7、IE 8 Beta2 版本均不能正常触发控件。
这个功能是非常好用的，可以有效的提高网站的用户体验，我们不能丢弃这个功能，所以要借助与 JS 来完成我们的目标。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<!--[if IE]>
<script type="text/javascript">
function radioFocus() {
var labels = document.getElementsByTagName("label");
for(var i=0; i<labels.length; i++) {
labels[i].onclick = focusEvent;
}
}
function focusEvent() {
this.previousSibling.checked = true;
}
window.onload = radioFocus;
</script>
<![endif]-->
</head>
<body>
<ul>
<li><input id="r1" name="r1" type="radio" /><label for="r1"><img src="http://www.csser.name/images/logo.gif" /></label></li>
<li><input id="r2" name="r1" type="radio" /><label for="r2"><img src="http://www.csser.name/images/logo.gif" /></label></li>
<li><input id="r3" name="r1" type="radio" /><label for="r3"><img src="http://www.csser.name/images/logo.gif" /></label></li>
</ul>
</body>
</html>
因为只是为了解决 IE 下的问题，所以加了条件注释，仅针对 IE 浏览器。大家可以在这里看到一个实例。
这篇文章发布于 2008年10月29日，星期三，20:51，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。