質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

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

解決済

回答 4

投稿

  • 評価
  • クリップ 5
  • VIEW 14K+

gsuisk

score 72

<textarea>でメモ帳のような機能を実装しました。
(メモ帳に限らず、問い合わせフォームのようなもの全般についてのことですが)

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

イメージとしては、入力途中にボタンをオンにすると以降、入力が赤文字になる。またオフにすると以降元の黒文字に戻るといった感じです。

<span>等で該当部分を区切ってCSSで色を変えるということではありません。

調べると、ボタンをクリックすると入力した文字全ての色が変わる(ボタンクリックする前に入力した文字色も変わる)ようなものなら出てくるのですが、、

途中から文字の色を変えることはJavaScriptで実装可能でしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+8

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+4

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る