チャットのUIについて

Question

Ruby on Railsの練習でTwitterのようなSNSを作っていて現在チャット機能を作っているのですがチャットの入力ボックスのUIについていろいろ調べたのですがわからなかったので質問させていただきました。

チャットの入力ボックス

チャットの入力ボックスはinputかtextareaで作ると思うのですがDiscordやTwitterのチャット画面のソースを見てみてもinputやtextareaが見つからないのですがどのような仕組みで作っているのでしょうか。
inputで作ろうとすると改行ができない、textareaで作ろうとするとUIが少しおかしくなるので戸惑っています。

↓現在のHTML

  <div class="text-box">
  <form class="messageInputForm">
    <div class="container">
      <textarea type="text" data-behavior="room_speaker" class="messageInputForm_input" placeholder="メッセージを入力..."></textarea>
    </div>
  </form>
  </div>

Answer 1

要件としては「入力した情報を送信出来ること」なので
それが実現できればなんでも良いと思います。
inputなどの入力コントロールである必要はありません。

textareaだってCSSで調整すればどのようなUIも表現可能かと思います。
「おかしくなる」のでしたら「おかしくならないように調整」すれば良いのです。

Materialize CSS - Text Inputs
テキストボックスをおしゃれにするCSSスニペット10選。フォームのデザイン改善に。

Comments

[oikashinoa]

twitterの"いまどうしてる？"部分のことです？

https://teratail.com/questions/249579#reply-361024の”競合サイトのCSSとJavaScriptを丸裸にする方法”を見ると以外なことが分かりますよ。使っているのはinputかtextareaではないです。

[m.ts10806]

質問者、私 双方とも「inputやtextareaではない」と認識した上での回答と思ってます。
回答要約すると「(確かに使われてないようだが)文字さえ打って送信できればinputである必要はない。(質問者が試した)textareaで崩れるっていうけどCSSでどうにでもできるはずだよ」です。

[oikashinoa]

別回答にしているつもりでした。ぶら下げてすみません。

> inputやtextareaが見つからないのですがどのような仕組みで作っているのでしょうか。
と質問文に有ったのとソースもtextareaしか試してないようでしたので。

二人とも理解しているのであればこれ以上話は挟みません。

[m.ts10806]

あ、ごめんなさい。そういうことですね。ありがとうございます。