HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

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行挿入するだけでよいので低コストです。

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

このエントリーをはてなブックマークに追加

Comment

Comment Form

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

Monthly Archives

Search