textareaで途中で文字の色を変える方法

Question

<textarea>でメモ帳のような機能を実装しました。 (メモ帳に限らず、問い合わせフォームのようなもの全般についてのことですが) 文字を入力している途中で文字の色を変えたり太字にしたりするにはどのような技術が必要でしょうか？ イメージとしては、入力途中にボタンをオンにすると以降、入力が赤文字になる。またオフにすると以降元の黒文字に戻るといった感じです。 <span>等で該当部分を区切ってCSSで色を変えるということではありません。 調べると、ボタンをクリックすると入力した文字全ての色が変わる(ボタンクリックする前に入力した文字色も変わる)ようなものなら出てくるのですが、、 途中から文字の色を変えることはJavaScriptで実装可能でしょうか？

Answer 1

いわゆるリッチエディタのようなものですね！

wordpressやmidium、twitterの投稿部分も同じような原理で出来ています。

回答者の方が紹介されているリンクの中にもありますが、contenteditableというhtmlの属性を利用して作成します。

htmlのタグにcontenteditable属性を付与すると、htmlの内容を編集可能状態にすることが出来ます。
例えばteratailの画面をcontenteditable状態にすると以下のようになります。

この技術を使用すれば質問者様が仰っていることは実現可能です。

<div contenteditable style="width: 100px;height: 100px;"></div>

// document.execCommand(ココにどのようにしたいかを書く)

//bold
document.execCommand('bold')

// italic
document.execCommand('italic')

出来ることは基本的にブラウザに定義されているものがあるので参考にしてください！
document.execCommand

ちょっと作ってみたのでよかったら触ってみてください！
リッチエディタのサンプル

ただ、扱いが非常に難しいのと全ブラウザに対応するとなると非常に大変です。
単純に工数が増えますのでそのへんはよきにやってみてください！

Answer 2

文字を入力している途中で文字の色を変えたり太字にしたりするにはどのような技術が必要でしょうか？

それは無理っぽいです。textarea ではその value 属性の値を表示するということで、その一部にスタイルを適用して背景色を変えるということはできないようですので。

ただし、以下の記事のようなウラワザ的な手段はあるそうですので、どうしてもということであれば調べてみてはいかがでしょう。

Facebookみたいにtextareaの一部を強調する
http://qiita.com/yuku_t/items/516ec6fe59b77b93edc5

Answer 3

<textarea> タグの中身はプレーンなテキストであり、途中で色やフォントウェイトなどを変えることはできません。変えられるのは全体の背景色や文字色などです。これは JavaScript は関係なく、html とスタイルの仕様です。部分構造を持たないので、もちろん、JavaScript で制御することはできません。

装飾を加えたければ、<textarea} と同等の動きをする文字入力エリアを、CSS や JavaScript を駆使して作る必要があります。

<textarea> タグの背景色を透明にして、文字に合わせた適当な背景色をつけることで <textarea> 内の文章の一部を目立たせる、というのを facebook とかはやっているみたいです。

• Facebookみたいにtextareaの一部を強調する - Qiita

Answer 4

そのままではできないのでTinyMCEなどを使います。
https://www.tinymce.com/