質問: でメモ帳のような機能を実装しました。 (メモ帳に限らず、問い合わせフォームのようなもの全般についてのことですが) 文字を入力している途中で文字の色を変えたり太字にしたりするにはどのような技術が必要でしょうか? イメージとしては、入力途中にボタンをオンにすると以降、入力が赤文字になる。またオフにすると以降元の黒文字に戻るといった感じです。 等で該当部分を区切ってCSSで色を変えるということではありません。 調べると、ボタンをクリックすると入力した文字全ての色が変わる(ボタンクリックする前に入力した文字色も変わる)ようなものなら出てくるのですが、、 途中から文字の色を変えることはJavaScriptで実装可能でしょうか?
回答: いわゆるリッチエディタのようなものですね! wordpressやmidium、twitterの投稿部分も同じような原理で出来ています。 回答者の方が紹介されているリンクの中にもありますが、`contenteditable`というhtmlの属性を利用して作成します。 htmlのタグにcontenteditable属性を付与すると、htmlの内容を編集可能状態にすることが出来ます。 例えばteratailの画面をcontenteditable状態にすると以下のようになります。 !イメージ説明 この技術を使用すれば質問者様が仰っていることは実現可能です。 ``` ``` ``` // document.execCommand(ココにどのようにしたいかを書く) //bold document.execCommand('bold') // italic document.execCommand('italic') ``` 出来ることは基本的にブラウザに定義されているものがあるので参考にしてください! document.execCommand ちょっと作ってみたのでよかったら触ってみてください! リッチエディタのサンプル ただ、扱いが非常に難しいのと全ブラウザに対応するとなると非常に大変です。 単純に工数が増えますのでそのへんはよきにやってみてください!