javascriptを使用して選択終了位置を検出する

Question

javascriptを使用して選択の終了を検出し、終了位置にマーカーを配置するコードを作成しました。このjsfiddleを参照してください：http://jsfiddle.net/vCwwN/

上記のコードは、次の手順を実行します。

• それが正しく（正常終了時にマーカーを示す）は、すべてのLTRスクリプト（例えば、英語）を扱います。
• LTRスクリプト（英語など）の場合、選択が停止した場所（マウスを使用して）にマーカーが正しく表示されているかどうかを処理します（左/上から右/下へ）または逆方向（右/下から左/上へ）またはキーボード）。
• これは、すべての選択矩形の境界を見つけるためにgetClientRectsを使用し、選択の方向を検出するためのハック（後方またはそうでない場合）を使用します。これらの2つの情報に応じて、最後にマーカーを配置します。

英語のスクリプトで説明した内容を問題なく選択できます。唯一の問題は、RTLスクリプト（アラビア語など）を処理しようとしたときに、マウス/キーボードが実際に停止した場所ではなく、選択したRTLスクリプトの先頭にマーカーが表示される場合です。これらの問題の原因は次のとおりです。

• RTLスクリプト（アラビア語）で選択を開始し、RTLスクリプト（アラビア語）で選択を終了します。これは、選択の開始時にマーカーを表示します。
• LTRスクリプト（英語）内の選択を開始し、RTL（アラビア語）スクリプト内の選択を終了します。これは、RTLスクリプト選択の開始時（終了時ではなく）にマーカーを表示します。

基本的に、任意の場所（LTRまたはRTL）から開始し、RTLスクリプトで終了する選択は正しくありません。それ以外の場合は正しく処理されます（例：LTRまたはRTLで始まり、LTRで終わり、途中でRTLスクリプトを渡しても終わります）。

問題は、フローの方向がRTLスクリプトのために反転され、したがって後方が前方、前方が後方であることです。これが私のコードがRTLを適切に扱うことができず、逆方向のハックが逆転する理由です。

私が考えた解決策の1つは、選択の最後の文字を検出し、それにRTLスクリプトがあるかどうかを確認し、これに基づいて後方フラグを反転させることでした。テキストがRTL文字で終わるかどうかを検出する関数をすでに配置しています（同じ未使用のjsfiddleにあります）。それはあなたを助けるかもしれません、私はそれを解決するのに役立ちます:)

Answer 1

これが正しい方向のステップであるかどうかを参照してください。

それはTim Downによって投稿Return HTML from a user selectionに次のコードを活用：

function getSelectionHtml() { 
    var html = ""; 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      var container = document.createElement("div"); 
      for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
       container.appendChild(sel.getRangeAt(i).cloneContents()); 
      } 
      html = container.innerHTML; 
     } 
    } else if (typeof document.selection != "undefined") { 
     if (document.selection.type == "Text") { 
      html = document.selection.createRange().htmlText; 
     } 
    } 
    return html; 
} 

ことが定義されたら、あなたは最後の文字がRTLであったかどうかをチェックするために定義されたlastCharTRLメソッドを呼び出し、それに応じて行動することができます。

if (lastCharRTL(getSelectionHtml())) 
    $('#pointer').css({top: rects[n].top + 10, left: rects[n].left - 10}).show(); 
else if(backwards) 
    $('#pointer').css({top: rects[0].top + 10, left: rects[0].left - 10}).show(); 
else 
    $('#pointer').css({top: rects[n].top + 10, left: rects[n].right}).show(); 

DEMO