[JavaScript] iPhone と iPad で label 要素のタップを有効にする

仕事で iPhone と iPad で label要素 のタップを有効にするライブラリを作成したのでメモ程度に公開する。

DEMOはiPhone若しくはiPadでご覧ください。

通常のPCサイトでは label要素 を使用することで、ラベル文字列をクリックすると関連付けられた入力項目がクリックされたかのように動作(ラジオボタンやチェックボックスが選択状態になったり)させることができるが、mobile safari では、このような label要素 の動作に対応していない。
本ライブラリを使用することで、mobile safari でもこの動作を有効にすることができる。

使い方

ZIPファイルを解凍後、任意のディレクトリにJSファイルを配置し、本機能を実装したいhtmlでJSファイルを読み込むだけ。

<script src="js/labeltouchable.minified.js"></script>

尚、本ライブラリを有効にするには、label要素 は以下の様に for属性 で対象 input要素 の id属性 を指定する形式で記述する必要がある。

<input type="checkbox" id="checkbox1" name="checkbox" value=""><label for="checkbox1">あいうえお</label>

投稿日付 :

カテゴリー : JavaScript | Library

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/170

コメント投稿フォーム