1

2 つの要素を持つ配列 (IE では機能しません) を返す関数があります。

  • ユーザーが div 内で選択したものの html コード (id=text)
  • 選択範囲

ユーザーがテキスト div 内の単純な文字列を選択した場合、範囲は正しい値を返しますが、ユーザーが div の要素の子 (div#text->p など) 内の文字列を選択した場合、範囲の値は子要素に関連していますが、親に関連させたい (div#text)

ここに JsFiddle がありますhttp://jsfiddle.net/paglia_s/XKjr5/ :通常のテキストまたは通常のテキスト + 太字のテキストの文字列をティータエリアで選択すると、正しい選択が得られますが、太字の単語 (" am") 範囲は子要素に関連しているため、間違ったものを取得します。

範囲が常に div#text に関連するようにする方法はありますか?

4

2 に答える 2

3

私のRangyライブラリとその新しいTextRange モジュールを使用できます。これは、Range メソッドと選択メソッドを提供し、コンテナ要素の可視テキスト内の文字オフセットとの間で変換を行います。例えば：

var container = document.getElementById("text");
var sel = rangy.getSelection();
if (sel.rangeCount > 0) {
    var range = sel.getRangeAt(0);
    var rangeOffsets = range.toCharacterRange(container);
}

rangeOffsetsには と のプロパティがstartありend、 内の表示テキストに相対的containerです。表示されるテキストは、jQuery のメソッドが返すものと必ずしも同じではないため、 Rangy の実装text()を使用する必要があります。innerText()例：

http://jsfiddle.net/timdown/KGMnq/5/

または、Rangy を使用したくない場合は、以前にスタック オーバーフローに投稿した関数を適応させることができます。ただし、これらは DOM Range および Selection API に依存しているため、IE < 9 では機能しません。

于 2012-06-09T11:04:41.937 に答える
0

ここでライブラリを使用したくない場合は、私にとってうまくいった方法です。この関数は、指定されたノードの textContent に関連するカーソル オフセットを返します (サブ ノードに関連するものではありません)。注: 現在のカーソル位置は、指定されたノードまたはそのサブノードのいずれかにある必要があります。ブラウザ間の互換性はありません (特に IE には対応していません) が、それを修正するのもたいした作業ではないと思います。

function getCursorPositionInTextOf(element) {
    var range = document.createRange(),
        curRange = window.getSelection().getRangeAt(0);
    range.setStart(element, 0);
    range.setEnd(curRange.startContainer, curRange.startOffset);
    //Measure the length of the text from the start of the given element to the start of the current range (position of the cursor)
    return document.createElement("div").appendChild(range.cloneContents()).textContent.length;
}
于 2012-07-06T07:53:46.633 に答える