過去 2 日間頭を悩ませている恐ろしい問題があり、まだ解決策が思い浮かびません。そのため、これを達成するには私よりも賢い人が必要だと思います。
私が構築しようとしているのは、Facebook のものをシミュレートするテキスト ボックスです。要はタグ付け機能。
Facebook を使用したことがある場合は、名前を入力してドロップダウン リストから選択するだけで、コメントや投稿にタグを付けることができることに気付くでしょう。選択した人物の名前が、そのテキストエリア内の強調表示されたテキストに表示されます。JQuery と AJAX を組み合わせてドロップダウン リストを作成して設定することに成功しましたが、タグ付けプロセス自体が問題です。
ドロップダウン項目が選択されると (Enter またはクリックによって)、クエリ テキストがタグ付けされた名前に置き換えられます。さて、テキストエリア内のテキストに何らかのハイライトを与える方法を理解するのは難しいので、(Google Chrome で要素を調べてテキストエリアノードを削除することにより) テキストエリア自体が透明で、白い部分があることを発見しました。テキストを「シミュレート」する下の div。強調表示された単語はカスタム CSS を使用してタグに配置され、青色の背景になります。これはすべて私自身が発見したことであり、これをシミュレートすることに成功しましたが、タグ付けできるのは 1 つだけです。
さらに調査したところ、「mentionsHidden」クラスの input type="hidden" 要素が見つかりました。この入力要素には value 属性があり、テキストエリアのコンテンツに基づいて動的に設定されます。したがって、「ABC」と入力すると、要素の値は「ABC」になります。タグ付けたら「こんにちは【レイ】！」（[]内はタグ）、要素の値は「hi @[member_id:Rei]!」となります。
だから私は宿題をしました。しかし、ここで私が理解できない部分があります。
非表示の入力要素にテキストボックスの値を動的に入力する方法が正確にわかりません。青いタグの背景を提供する基になる div が入力要素から取り込まれていることは明らかです。しかし、入力要素が頭を悩ませています。
ほら、私は次のことができません：
-現在のテキストエリアの値全体を単純に「コピー」して入力要素の値に「貼り付ける」ことはできません。これは、入力要素内の以前にタグ付けされた人を上書きするためです (結局のところ、テキストエリアはプレーンテキストしか所有できません)。 .
-キャレットの現在のインデックス (入力する場所を示すテキストエリアの点滅する黒い線) を見つけることはできますが、それはテキストエリアのみです。テキストエリアと入力要素の値のインデックス位置 10 は、異なるものになる可能性があります。これは、この方法で人を「タグ付け」すると、文字列の値に追加の文字が追加されるためです。
-値文字列の他の部分に同じテキストの他のインスタンスが存在する可能性があるため、置換しようとしているテキストを単純に「置換」することはできません。
非常に長くて紛らわしい投稿であることは承知していますが、私の言いたいことが理解できることを願っています。本当に解決策が必要ですが、contenteditable は使用したくありません。これは HTML5 専用であり、一部の古いブラウザーではサポートされていない可能性があるためです。
あなたの、レイ