スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

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

update : 2013/01/08

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

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

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

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

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

labelなしです

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

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

対策1:空のonclick属性を追加する

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

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

対策2:JavaScriptで対応する

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

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

対策3:jQueryで対応する

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

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

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

B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives