{ テキストエリアに色付き文字を出力する：α }
red blue green purple
red blue green purple
|
赤 |
青 |
緑 |
紫 |
{ テキストエリアに色付き文字を出力する：β }
red blue green purple
red blue green purple
|
赤 |
青 |
緑 |
紫 |
ブログなどで見かける、 html タグのテキストエリアの文字に色をつけて表示する
プログラムを JavaScript で作成ました。
文字の入力用のテキストエリアとキャレット配置用の pre タグ一つ、
文字に色を付けるための pre タグがもう一つ。
色を出すために、合計三枚のタグを重ねる結果になってしまいました。
最初、2 つのタグを重ねて出来る予定で作り始めました。
しかし、 chrome では、テキストエリアの文字列に色を付けるため、
文字を透明にしたところ、テキストエリアのキャレットが文字と一緒に消えてしまいました。
IE では文字を透明にしても、キャレットは消えること無く表示されます。
一個の pre タグに色用タグとキャレット用タグの設置を試みてはみたのですが、
色付け用のタグの中にキャレットを配置する方法が分からなくて
キャレット専用の pre タグを、もう一つ設置することになってしいました。
テキストエリアに入力すると、リアルタイムに色付文字へ変換します。
また、任意の文字列を登録する事もできます。( このサイト内の間 )
プログラムは、テキストエリアにフォーカスがあたると setInterval 関数でテキストエリアを監視して、
内容を 2 つの pre タグへ出力し続けます。
なので、大きなサイズのデータは入力しない方がいいと思います。ヽ(´ー｀)ノ
上のプログラムは、テキストエリアを監視する setInterval 関数を使用しないで作成した修正版(α)です。
onkeypress のイベントが発生した時に、キャレットの位置がうまく取れなくて、setInterval で調整してましたが
setTimeout 関数を使用して情報をとるタイミングを遅らせると、うまくいきました。_(:3」∠)_