1

2つのテキストエリアがあります。スタイリング/表示用のTA1、および入力キャプチャとスパンタグの上にカレットを配置する機能用のTA2。これらは常に同じ値になりますが、TA1にはスタイリング用の追加のhtmlが含まれます。

TA1はTA2によってオーバーレイされます。基本的に、textareaがクリックされると、TA2はイベントを受信します。

TA2のカーソル位置に基づいてTA1の要素を選択しようとしています。TA2でクリックされた単語の範囲はわかっていますが、TA1で適切なスパンを選択する必要があります。基本的に、TA2をクリックして、TA1でハンドラーをトリガーする必要があります。

TA1のスパンの直後にカレットを配置し、前のスパンを選択できるかどうかを確認しようとしていましたが、今のところ成功していません。

TA1内のテキストの例を次に示します。

<textarea>
<span class=\"suggestion\" title=\"Click to edit\">TESTP</span>\n
    \n
    123\n
    \n
    TESTING\n
    \n
    123\n
    \n
    <span class=\"suggestion\" title=\"Click to edit\">TESTP</span>  
</textarea>

上記のhtmlは次のようにレンダリングされます。

Textarea

たとえば、最初の「TESTP」をクリックした場合、範囲は0〜4になります。TA1の5の位置にキャレットを配置した場合、スパンタグを選択する方法はありますか？フィルタを使用してこれを達成できるかどうかを確認しようとしていますが、他に何か提案があるかどうかを確認したいと思います。

私は先に進んで、このjsFiddleで何を達成しようとしているのかを大まかに作成しました。右側のtextAreaは、トリガーしようとしているクリックハンドラーを表示するためにあることに注意してください。その上に別のレイヤーがないため、機能します。左側のtextAreaは、私が現在いる場所です。

4

1 に答える 1

0

これは、次のSO項目を調査し、ハンドラーのロジックを更新することで解決されました。

how-can-i-wrap-the-previous-current-and-next-word-inside-a-tag-using-jquery

how-to-have-transparent-fonts-except-for-the-text-caret-in-a-textarea

于 2014-11-14T22:59:51.013 に答える