eyemovic inc.

Culture blog会社の活動・働き方

2012.07.05

iPhone/iPadでlabel要素を有効にする

最近スマートフォンの案件が増えて来ておりますので、
そこで出てきた、ちょっとした技術ネタをご紹介致します。

PCと同様に<label>要素だけ記述したのでは、
iPhoneやiPadでは、タップしても何に反応もしてくれません。
 

■■■解決例1■■■
label要素に onclick=”” を追加すると、有効になります。
※onclickの内容は空欄になります。
 

<input type=”radio” name=”hoge” id=”hoge” value=”” />
<label for=”hoge” onclick=””>テキスト</label>

 

■■■解決例2■■■
使用するページで下記Javascriptを読み込むだけで、有効になります。
 

<script type=”text/javascript”>
$(function(){
     var ua =navigator.userAgent;
     if(ua.indexOf(‘iPhone’) > -1 || ua.indexOf(‘iPad’) > -1 || ua.indexOf(‘iPod’) > -1){
          $(‘label’).click(function(){});
     }
});
</script>

 

スマホで、チェックボックスやラジオボタンは押しづらい為、
ユーザビリティ的にもlabelでタップエリアを拡大しておく必要があると思います。
 

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。