MZhou's blog

iOS 5 Mobile Safari中label的bug

前几天在codepen上看到了不错CSS用法,今天打算在写新博客的时候使用类似的思路:

用input[type=checkbox]来控制同级元素的样式,实现只用CSS来修改样式状态的特性。

做的时候发现iOS 5下此demo无法用,于是发现了label元素的一个bug。我们在写表单的时候,为了实现点击label自动选中input,一般会这么做:

<label for="email">Email</label>
<input type="text" id="email"/>

这样当用户点击Email文字时,输入框会自动选中,以提高用户体验。但是如果input是checkbox呢?

<label for="sure">Sure</label>
<input type="checkbox" id="sure"/>

此时在iOS 5中,点击文字Sure,checkbox不会自动勾选!搜索之后得到解决方案:为label加个onclick属性,它就可以正常触发input[type=checkbox]了。

<label for="sure" onlcick>Sure</label>
<input type="checkbox" id="sure"/>

本来以为OK了,于是写了个测试用例。却发现还需要另外一个条件才能触发label的行为。而且这不仅仅针对checkbox,对所有的input都需要这两个条件

  1. label有onclick属性(即绑定了click事件),或者是它的父元素绑定了click事件。
  2. label的css cursor值必须是pointer

另外有个注意点:不同的父元素绑定click又会有影响。如果是document.body绑定,那么手指按下的时候label会有样式上的变化(onclick也有此效果)。如果是一般的父div则没有此效果。

猜测此bug同样影响了iOS 5上的其他浏览器(注:这里只测试了Chrome)。iOS6上已经修复了此bug。因为手头没有设备,故没有测试iOS5之前版本是否有此bug。

最后fork修改原来codepen上的demo,Check it out~ http://codepen.io/zmmbreeze/pen/AaLFJ

MZhou's blog - Taste of life.

zmmbreeze / @zhoumm