テキストエリアに異なるフォントの色を設定するにはどうすればよいですか？

Question

Visual Studioのような特定のキーワードを入力すると、テキストエリアでフォントの色を変更することができます。

私はこれをどこでも見ていないので、HTMLとJavaScriptでこれが可能かどうかわかりません。

このような人は誰ですか？またはそれを書く方法を知っていますか？

Answer 1

テキストが変更されたときに検出するためにクライアントでjavascriptを実行し、ハイライトされるテキストをいくつかの子html要素で適切なスタイルに置き換える必要があります。

は、例えば

元のテキスト：

This is what the user typed. 

強調表示されたテキスト

This is what the <a class="className">user</a> typed. 

Answer 2

テキストエリアには、標準的なHTML要素であり、これだけの時間の夜明け後に発明されました。残念なことに、これはその外観と機能が限定されていることを意味します。

私が知る限り、特定の単語の色を変更することはできません。しかし、これを回避する方法は、iFrameをページに埋め込むことです。こうすることで、iFrameコンテンツを別のWebページとして扱い、CSSを使用してスタイルを設定することができます。

Yahoo RTE、FCKEditorおよびLightweight RTEはこのように機能します。

iFrameを使用しない別のオプションは、ここでWMDと呼ばれるスタックオーバーフローで使用されるエディタです。ファイルはhereです。

Answer 3

これはできません。どこへ行く

ウェイは、100％textareaの内容がテキストエリアのoninputイベントでフォーマット+コピーされるにdivを重ね、根本的な作成、​​を使用してテキストエリアのフォントを作るが、カーソルではない、透明ことです。

たとえば、スクロールなど、これらの2つの要素の同期から生じるいくつかの問題を解決する（または回避する）必要があります。私は自分のHTMLエディタをこのように作った。

AFAIK、cssのプロパティ-webkit-text-fil-colorは、Opera、Chromeでサポートされており、まもなくリリースされるFirefox v.48に含まれているはずです。