inputに対するlabelタグが効かないiOS版のSafari。これを回避するには…。
なんとなく html を書いているときに気がついたのでメモメモ。
例えば「チェックボックスを設置したとき、説明文をクリックしても反応する」ようにするためには、
<input type="checkbox" name="cb" id="id1" /><label for="id1">説明文</label>
または
<label>
<input type="checkbox" name="cb" />説明文
</label>
<input type="checkbox" name="cb" />説明文
</label>
などと書いてやれば、
と、これで説明文（ラベル）のほうをクリックしてもチェックボックスが反応するわけですが、これが iPhone の Safari だと効かないのです。文章のほうをタップしても反応してくれない。
で、こいつを iOS版Safari でも効くようにするのは簡単で、
<label onclick="">
<input type="checkbox" name="cb" />説明文
</label>
<input type="checkbox" name="cb" />説明文
</label>
…と、「ラベルのクリックイベントを捕捉して何もしない」という処理をしてやるだけ。onclick=〜 の中身が空なのが気持ち悪いという時は、onclick="function(){}" とか onclick="(function(){})()" とか onclick="null" でも大丈夫です。全く意味はありませんが。
「何もしない」という onclick属性を追加しているだけなので、iOS版Safari以外のブラウザでの挙動にも変な影響は与えない筈。らくちん。
匿名
<label>内に<input>書いているからclickイベントがダブって反応しないんじゃない？
http://www.tagindex.com/html_tag/form/label.html
にもあるように対応していないブラウザは多いです。<label>内にはラベルしか書かず、<input>は<label>外にしforで指定すべきだと思います。