textareaに、入力した文字に色をつけたい。

jquery.mentionsInput

という機能で現在、実装されているものをVueで書き換えたかった。

何をやりたいかというと、コメント欄にメンション機能をつけて、そのメンションに対して、色付けしたいという要望。

色付けする = HTMLなので、textareaを普通に使っただけでは実装できなくて、めっちゃ辛かった。

 

 

色々調べたところ、最終ゴールとしては、contenteditableを用いて、twitterのようなUIを目指すのが良さそう。

ただ、闇が深そうだったので、一旦下記を参考にして、違う方法で実装した。

 

markus.oberlehner.net

 

textarea層とHTML層の2層作って、textarea層の背景色をtransparentにして、その下に配置したHTML層の色を上手く当てることで、限られた部分だけの色つけを可能にした。できたら、Twitterみたいに文字色も変えたかったけど、限られた部分だけ色付けするっていうのが、結構厄介だったので、一旦断念。

jqueryの方もこの方法を使ってる。

 

正直、満足いくUIにできなかったので、時間ある時、contenteditableを使ってみたいと思う。