twitterの様な入力フォームが作りたい

ツイッターの様な入力フォームが作りたいと思っているのですが、よいライブラリが見つかりませんでした。
欲しい機能としては、下記となります。

　１．文字数を表示
２．タグを認識して色を変える
３．タグのサジェスト機能

１は簡単だと思います。
２の原理が良く分かりません。
divを入力可能にして、リアルタイムに編集するということでしょうか？
（textareaは使用しない？）

html
1<div contenteditable="true">
2<p>ここのテキストが編集・削除できるようになります</p>
3</div>

３については無くても良いのですが、サジェスト用のdivを別に用意して、それを表示させれば良いのかなと考えております。

２について、簡単にご説明頂けないでしょうか？
宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

div でよいと思います。
Twitter に長い文字列を入力して文字数オーバーした際の HTML は下記でした。Chrome の F12 で取得しました。

HTML
1<div data-offset-key="bofhr-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
2  <span data-offset-key="bofhr-0-0">
3    <span data-text="true">
4      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
5    </span>
6    <span data-offset-key="bofhr-0-1" style="background-color: rgb(253, 155, 176);">
7      <span data-text="true">
8        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
9      </span>
10  </span>
11</div>