10 June, 2011

Mobile Safari の Label 要素挙動覚え書き

iPhone/iPad/iPod touch の Mobile Safari は、デフォルトでは label 要素をタップしても関連付けたフォームフィールドのフォーカスを代行しない。 つまり、<label for="checkbox1"> などと指定しても、label タップで checkbox1 の選択状態は変化しない。

これを fix するために、ページロード時などに予め各 labelclick イベントハンドラへ何らかの function をバインドする(function がバインドされてさえいれば良いので、特に何か処理をする必要はない)。 この挙動は iOS だけでなく Android の標準ブラウザでも同様らしい。

コード例

こちらの検証ページを Mobile Safari で開くと、text2label 以外は fix されているはず。