专栏首页前端小作坊iOS 5 Mobile Safari中label的bug

iOS 5 Mobile Safari中label的bug

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 中文排版二三事

    前段时间一直在折腾中文排版相关的事情,自认为结果还算不错。故开源之,即是Entry.css。这是一个可配置的、更适合阅读的中文文章样式库,可以用来快速搭建中文博...

    mmzhou
  • GA源代码里的小技巧之cookie篇

    cookie的本质是存储在浏览器端的一段简单数据(多个键值对),浏览器会从服务器接受或者发送给服务器cookie。这样便可以为没有状态的HTTP协议提供了记录状...

    mmzhou
  • Permissions API

    如果你以前使用过Geolocation API,那么你很可能希望可以检查自己是否有权限来使用Geolocation API并且不展示确认框。这个简单的愿望目前是...

    mmzhou
  • 【转】jQuery验证控件jquery.validate.js使用说明+中文API

    用户1696846
  • 表单

    form 表单 <input type="…… " name="" value="" /> text 文本框 passwor...

    河湾欢儿
  • Linux 常用环境变量

    Spaceack
  • 人民日报推文:欢迎Google重返中国大陆,但必须遵守中国法律

    近日,谷歌将回归的消息充斥着各大媒体。尽管是否回归还是一个未知数,但是一切迹象表明,谷歌回归只是时间问题。

    大数据文摘
  • Scalaz(1)- 基础篇:隐式转换解析策略-Implicit resolution

    在正式进入scalaz讨论前我们需要理顺一些基础的scalaz结构组成概念和技巧。scalaz是由即兴多态(ad-hoc polymorphism)类型(t...

    用户1150956
  • 设计模式 - 抽象工厂模式

    在工厂模式中,每一个工厂负责生产对应的一款具体的产品,具有唯一性。但有时候,人们还需要一个工厂能够提供多个产品对象。

    子乾建建-Jeff
  • 机器学习优化算法之爬山算法小结

     简言        机器学习的项目,不可避免的需要补充一些优化算法,对于优化算法,爬山算法还是比较重要的.鉴于此,花了些时间仔细阅读了些爬山算法的paper....

    Gxjun

扫码关注云+社区

领取腾讯云代金券