テキスト入力欄に要素を入れる。

Question

やりたいこと

ここに、やりたいことの画像の例をあげます。
terarailの場合

Twitterの場合

このように、入力欄に要素を入れたいです。
(teratailの場合はタグ、Twitterの場合はそのままテキスト欄に画像が入っていること、そしてハッシュタグなどで一部の色が変わること)
これは、通常のtextareaでは可能なのでしょうか。可能であれば方法を教えていただきたいですし、
textareaやinputを使わない方法であるのですたらそれも教えていただきたいです。

Answer 1

通常のtextareaでは可能なのでしょうか。

不可能です。

textareaやinputを使わない方法

divタグなどで作成します。
Chrome DevToolsで確認してください。

Comments

[Res]

前にdivタグで作成されたものを見ていたのでそれとは思っていたのですが...

ですが、入力されたテキストの所得はどのようにやるのでしょうか。

[yasutomi]

Chrome DevToolsで確認してください。
あと所得ではなく取得です。

Answer 2

divタグにテキスト入力を可能にするには、HTMLタグのcontenteditable属性を使います。
参考サイトは沢山あるので見てみてください。
要素のテキストを取得する方法も、参考サイト沢山あるので調べてみてください。

ただ、僕も初心者でして、Chromeの検証ツールではTeratailから上記の方法は確認できなかったので、見当違いだったらごめんなさい。

Comments

[Res]

ありがとうございます‪( ´ω` )/????✨
またググッてみます。