labelクリックでinputにfocusする iOS対応

スマホで言えばこんなUIの入力フォーム。
この場合、画面の左半分がlabelで右半分がinput。

で、気がきかないから気にしてなかったのだが、labelをタップしても入力できないということで親切でないということで修正しようとしたらちょっとはまったのでメモしておく。

Labelをクリックしたらinputにfocusさせる(失敗)

javascriptで無理やりやろうとした。PCやandroidで確認してたらうまくいったのだが、何故かiPhoneのsafariでうまくいかず断念。

Labelとinputを関連づける(成功)

labelとinputの関連づけってよくやってるけど何の意味があるのかと思っていたのだが。こういうことなんですね。。
ちなみにCSSの「cusor:pointer」はこれがないとiPhoneで動かないみたい。

HTML

<label for="nickname">ニックネーム</label>
<input type="text" id="nickname" />

CSS

label {
  cursor: pointer;
}

以上です