使iPhone Safari的label元素生效

2011 1 20 09:43 PM 3419次查看

分类：JavaScript 标签：JavaScript, iPhone

今天在测试本站的手机页面时发现一个问题：我将一个label元素关联到一个checkbox上后，在电脑的浏览器上点击这个label时，checkbox会随之被勾选或取消；但用iPhone上的Safari浏览器测试时，却毫无反应。
本来label元素的一个很重要的作用就是方便用户点击表单控件，而iPhone上的checkbox非常小，如果不能点label的话是非常麻烦的。

网上搜了下也没找到很好的解决办法，最后不得已只能用JavaScript来修正了。
方法就是捕捉label的click事件，然后手动触发checkbox的click事件（如果是文本框的话，则触发focus事件）。为了避免电脑上出问题（复选框被点击2次），还得阻止标准的click事件传播。
代码如下：
<p><label for="test" onclick="document.getElementById(this.getAttribute('for')).click();return false;">test</label>
<input name="test" type="checkbox" id="test"/></p>

<p><label for="test2" onclick="document.getElementById(this.getAttribute('for')).focus();return false;">test2</label>
<input name="test2" id="test2"/></p>

如果label很多的话，用jQuery自然更加方便：
$('label').click(function(){
	var $input = $('#' + $(this).attr('for'));
	if ($input) {
		var type = $input.getAttribute('type');
		if (type == 'checkbox' || type == 'radio') {
			$input.click()
		} else {
			$input.focus()
		}
		return false;
	}
});

2011年1月21日更新：
据qian.qiao提供的信息，只需要添加一个空的onclick属性即可，即：
<p><label for="test" onclick="">test</label>
<input name="test" type="checkbox" id="test"/></p>

2条评论 你不来一发么↓ 顺序排列 倒序排列

    向下滚动可载入更多评论，或者点这里禁止自动加载。

    想说点什么呢？