inputに対するlabelタグが効かないiOS版のSafari。これを回避するには…。

PC版へ 2011年10月21日

なんとなく html を書いているときに気がついたのでメモメモ。

例えば「チェックボックスを設置したとき、説明文をクリックしても反応する」ようにするためには、

<input type="checkbox" name="cb" id="id1" /><label for="id1">説明文</label>

または

<label>
  <input type="checkbox" name="cb" />説明文
</label>

などと書いてやれば、

と、これで説明文(ラベル)のほうをクリックしてもチェックボックスが反応するわけですが、これが iPhone の Safari だと効かないのです。文章のほうをタップしても反応してくれない。

で、こいつを iOS版Safari でも効くようにするのは簡単で、

<label onclick="">
  <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で指定すべきだと思います。