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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

10457閲覧

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

gsuisk

総合スコア72

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2グッド

5クリップ

投稿2017/09/03 14:52

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

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

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

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

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

イメージ説明

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

html

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

js

1// document.execCommand(ココにどのようにしたいかを書く) 2 3//bold 4document.execCommand('bold') 5 6// italic 7document.execCommand('italic')

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

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

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

投稿2017/09/04 06:21

編集2017/09/07 01:04
MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

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

投稿2017/09/03 15:08

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

投稿2017/09/03 15:13

unau

総合スコア2468

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2017/09/03 15:44

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問