書いている最中にボタンを押すと色が変わるようなものを作りたい

Question

題名の通りです。
現在メモ帳なようなものを作っていてbottonを押すとその次の文字から色が変わるようなものを実装したいです。
textareaで実現しようとしても全然アイデアが下りてきません。
調べても出てこないので知恵を貸していただきたいです。
そもそもjsを使ってそんな実装はできないんでしょうか？
回答お待ちしてます。

Comments

[YT0014]

https://qiita.com/777_happ/items/0dfb5ecd22a04d34e942

Answer 1

textarea内のテキストの文字色を部分的に変更することはできません。

このteratailのエディターのように、マークダウン記法で入力して、別にプレビュー画面に表示させるか、
contenteditable属性を付与して、HTMLを編集可能にするか、
の方法になると思います。

下記には、contenteditableを使ったリッチテキストエディターのサンプルがあります。

コンテンツを編集可能にする - 開発者ガイド | MDN

修正依頼でYT1004さんが紹介されているリンクの方法もいいかもしれません。

textareaの文字を色分けする（しているように見せる）方法を考えてみた - Qiita

Answer 2

綺麗なやり方かは不明ですが、changeとかで入力値が変更されたら変更文字の色を変更するとかはどうでしょうか？