divタグの中にinputタグがある時に、親であるdivタグのどの領域をクリックした場合にも子のinputにフォーカスしたい

Question

#　知りたいこと

タイトル通りなのですが、以下ソースで赤枠内のどの領域をクリックした場合でもinputにフォーカスしたいです。

https://codepen.io/takahirohimi/pen/NWjRMrr

<div class='container'>
  <input />
</div>

.container {
  border: 5px solid red;
  padding: 50px;
}

実際の実装はReact（Next.js）で行っています。
できればid属性は使わないやり方を教えていただきたいです。

以上、ご教示よろしくお願いいたします。

ーーーーーーーーーーー追記ーーーーーーーーーーー

説明不足な内容がありました。
実際には以下のようにcontainerの中に複数のdiv(buttonタグを含む)が入ります。

https://codepen.io/takahirohimi/pen/NWjRMrr

<div class='container'>
  <div class='other'>
    <button>
      other
    </button>
  </div>
  <input />
</div>

.container {
  border: 5px solid red;
  padding: 50px;
}

このような場合に「赤枠内のotherボタン以外の場所をクリックした場合にinputにフォーカスしたい」です。

説明が不足しており大変申し訳ありませんでした。

Comments

[hayato7]

divタグをlabelタグに変更することも難しいのでしょうか？

[tanana_m]

情報を補足しました。
可能ですが、補足した内容を考慮してもlabelタグで対応可能でしょうか？

Answer 1

label要素で囲めばいいでしょう。

<div class='container'>
  <label>
    <div class='other'>other</div>
    <input />
  </label>
</div>

.container {
  border: 5px solid red;
}
.container label {
  padding: 50px;
  display: block;
}
.other {
  background-color: blue;
}

---

あるいは、div を label に変えればいいでしょう。

<label class='container'>
  <div class='other'>other</div>
  <input />
</label>

.container {
  border: 5px solid red;
  padding: 50px;
  display: block;
}
.other {
  background-color: blue;
}

<label> - HTML: HyperText Markup Language | MDN

labelタグの使い方 - HTMLリファレンス

Comments

[tanana_m]

ご回答ありがとうございます。
申し訳ありません、説明不足な内容がありましたので補足させていただきました。
補足を考慮した上でもご回答いただいた内容で対応可能でしょうか？

[hatena19]

可能です。

回答にリンクを追加しておきましたので、仕様、使い方を確認してください。

あとLabelは既定ではインライン要素なので、display: block; でブロックレベル要素に変換しておく必要があります。

[tanana_m]

ありがとうございます。リンク先も確認しました。

otherのdivタグの中にbutton要素が入るのですが、この場合だとlabelは厳しいですかね…？

[hatena19]

回答のコードをcontainerの中にdivがある場合のものに修正しましたので、確認ください。

[tanana_m]

何度も申し訳ありません、試してみたのですがうまくいかず…。
私の方も質問の追記内容をさらに修正しましたので、ご確認いただけますでしょうか。

[hatena19]

複数のフォーム要素があるということですね。
その場合、idとforを使うのがまっとうな解決法ですが、id属性を使えないという理由は何でしょうか。

<label class='container' for="input">
<div class='other'>
<button>
other
</button>
</div>
<input id="input" />
</label>

[tanana_m]

やはりidを使うことになるのですね。
使いたくない理由としては、ReactではCSSのスタイリングにおいてグローバルな名前空間を使用することは基本的に避けるべきとされているためです。
classであればコンポーネント単位でクローズドな名前空間にすることができるので問題無いのですが…。

[hatena19]

Reactのことはあまり分からないのですが、
ラベルとフォーム要素の関連付けは、CSSのスタイリングではなくHTMLの機能なので関係ないようにおもいますが。

idを使わずにとなると、labelを position: absolute; で絶対配置するとか、スクリプトでクリック時イベントでフォーカス移動させるとか、無理やりの方法になってしまいます。

[tanana_m]

承知しました。
参考にしていたNotionのInviteフォームのUIでは私の質問内容が実現されており、HTML, CSSを見る限りdivとinputのみで構成されていたので、おそらく後者のスクリプトでフォーカス移動等が行われていそうです。

たくさんご教示いただきありがとうございました、HMLTとCSSはまだまだ未熟なので大変勉強になりました。