iPhoneでlabel要素を動作させる方法

iPhoneではlabl要素を設定しても、labelがクリックされた際に対応するチェックボックやラジオボタンが選択状態になりません。

<input type="radio" name="radio" id="radio1"><label for="radio1">ラジオ1</lable>
<input type="radio" name="radio" id="radio2"><label for="radio2">ラジオ2</lable>
<input type="radio" name="radio" id="radio3"><label for="radio3">ラジオ3</lable>
<input type="radio" name="radio" id="radio4"><label for="radio4">ラジオ4</lable>

sample

label要素にclickイベントをバインドすれば動作するようになるので、次のコードをbody要素を閉じる直前なんかに入れてあげるとlabelがクリックされた際に対応するチェックボックやラジオボタンが選択状態になります。

[].forEach.call(document.getElementsByTagName("label"),function(ele){
	ele.addEventListener("click",function(){},false);
});

sample

関連エントリー

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
iOS6のリモートWebインスペクタ
iOS6でtransitionアニメーションが少し遅れて開始する問題
スマホサイトでtd/th要素へのposition:relativeはダメ!

スポンサードリンク

«CodeKitで簡単にCSS Preprocessorを利用する! | メイン | CodeKitの新機能「Kit Language」»