iPhoneでlabel要素を使っても選択エリアが広がらない

iPhoneに対してlabel要素を設定していも、選択エリアが広がりません。今回はその対応策について考えてみました。

例えば、フォームのラジオボタンやチェックボックスなどは、デバイスや画面サイズによっては操作しづらい事があります。そのような場合は、label要素で囲む事で、その囲まれたエリアをイベント領域として確保します。

例えば、以下のようなコードを用意してみました。

<input type="checkbox" />labelなしです<br />
<label><input type="checkbox" />labelありです</label>

そうすると、以下のような表示になります。

labelありだと、要素囲んだ「labelありです」の文字列の部分で、チェックのオン／オフができるので、操作性が上がりますね。
このように、フォームを組む際にユーザビリティとしてlabelを導入するのは、ここ最近は常識になっていますね。

しかし、iPhoneだと、このlabel要素が効きません。

対策１：空のonclick属性を追加する

<label><input type="checkbox" onclick="" />labelありです</label>

label要素に空のonclick属性を追加することで、iPhoneでも効くようになるようです。
但し、全てのlabelに属性を追加するのはスマートじゃない感じがしますね。

対策２：JavaScriptで対応する

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

JavaScriptでオンロード時にこのコードを実行することで、全てのlabelを有効にすることができます。

対策３：jQueryで対応する

$('label').click(function(){});

先ほどのJavaScriptをjQueryで簡略化してみました。
処理を1行挿入するだけでよいので低コストです。

スマフォサイトでフォームを組む場合は必須といえるでしょう。