ソーシャル、チャットなどのサービスではテキストエリアに文字を入力するとメンションを表示したり、タグのところだけ色を変えたりします。ユーザとしては入力した情報が正しく認識されていると安心できます。 同じ仕組みを提供する際に使えるのがTextoverlayです。テキストエリアをデコレーションしてくれる素敵なライブラリです。

Textoverlayの使い方

適用されているところです。上にあるのはテキストエリアですが、背景色が付いています。

実際に入力しているところです。条件は正規表現で指定するので、マッチしたタイミングで色が変わります。

Textoverlayを使えば@や#など何らかの意味を持つ文字入力が分かりやすく表現できます。Textoverlayだけでなく、入力補完ライブラリと組み合わせるとより効果的です。TwitterやFacebookと連携するアプリの場合も便利そうです。

TextoverlayはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

Textoverlay: Simple decorator for textarea elements yuku/textoverlay: Simple decorator for textarea elements