Month: July 2014

修復在ios4 label無法觸發onclick event

退伍後的第一個負責的案子最近上線了

在最後驗測的時候發現一個小地方需要修改

就是手機板網頁的checkbox太小了, 需要把它調大一點

因為是設計師提供的版型, 所以有請設計師調整過了

但只有在chrome有放大的效果, android原生的瀏覽器和firefox所顯示的checkbox還是原來的大小

所以就去看了一下設計師是利用哪種css的方式來調整checkbox的大小

是用 inline style的方式:

<input type="checkbox" name="sex" value="1"  style="width:40px; height:40px">

原來是用這種方式…記得沒錯的話有些瀏覽器不吃這種樣式

與其請設計師再改一下, 不如我找一些現成的範例來改

大多把checkbox變大的方式都是在checkbox上面再覆蓋一層label

藉由onclick去改變label的樣式, 已達到checkbox的效果

我也是利用這種方式, 原本很有把握的認為這樣就ok了

但是最後PM發現在ipad2的Safari上不能點…我也很驚訝

所以就去爬了一下文章:

How to fix the broken iPad form label click issue

我是採用以上的方法, 但後來發現有個更簡單的solution:

HTML <label> command doesn’t work in Iphone browser

Adding an empty onclick="" to the label makes the element clickable again on IOS4. It seems that by default the action is blocked or overtaken by the press and hold copy and paste text mechanics.

 

乾…其實只要加個onclick=””就解決的啊….OTZ

Advertisements