Web ページ内の編集可能な少量のテキストをシンタックス ハイライト表示できるようにしたいと考えていますが、前景色のバリエーションはわずかです。 （議論のために、3つとしましょう。）
オンライン リッチテキスト エディターでの煩わしい経験から、彼らのルーズエンドで君臨するのは無駄だと思うようになりました。そこで、いくつかの固定幅フォント<textarea>要素を重ね合わせて、それらを同期させるという奇抜なアイデアを思いつきました。それぞれが異なる前景色を持ち、背景の透明度を使用して、特定のレイヤーが印刷されない場所にギャップを残すだけです. ブラウザが合成を行い、すべてがうまくいくでしょう。
Opera、Chrome、Firefox、および Safari でのいくつかの探索的テストでは、これが実際に機能することがわかりました (変に聞こえるかもしれませんが)。しかし、非常にプレーンなテキストを使用したい最大の理由の 1 つは、コピーと貼り付けが簡単にできるようにするためです。しかし、テキストがこのようにレイヤーに分割されている場合、ユーザーが選択してすべてのテキストを生の形式で取得できるユニオンはありません。
私の最初の衝動は、すべてのレイヤーからのコンテンツを含むように同期されたテキストの最上位レイヤーにスタックすることでしたが、その色は透明でした。繰り返しますが、「うまくいきました」...しかし、残念ながら、ほとんどすべてのブラウザは、アクティブなテキストエリアの色から挿入ポイントの色をキューに入れています。つまり、キャレットが非表示になり、一部のブラウザーでは、選択しているテキストも非表示になります。(!)
そのため、私よりもこのことについて詳しい方からの洞察を求めています。このようなスタックをクロスブラウザーの方法でフックして、作成中に選択内容を読み取れるようにし、ユーザーが「コピー」したときにマージされたテキストを取得できますか? 誰もこのようなことを試したことがありますか? それとも、 「それはひどいアイデアであり、それを機能させる方法はありません」という証拠はありますか? 選択が変更されたときにクロスブラウザー通知を受け取ることができれば、マージされた文字を、選択範囲内のポイントで選択されているレイヤーに挿入できます。:-/
（ああ、私たちが織り成す絡み合ったウェブ...）