2

contenteditable でのテキスト選択が大きな問題を引き起こしています...

このコード部分と同じ方法で、選択ポイントの開始と終了を取得しようとしています:

http://jsfiddle.net/TjXEG/1/

( contenteditable にはさまざまなタグがあり、フォーカスを失った後に選択されたテキストを再選択する必要があるため (テキストノード?)

私は本当にそれで迷っています.誰かがチュートリアルやウェブブラウザでの選択を理解するための別のことを知っていますか?

ありがとう、イェパオ

4

1 に答える 1

2

elseChromeしか使っていないので、当てはまらないので切り落としました。そこで、Chrome のソリューションは次のとおりです。

Non-editable text. Editable is below:
<div id="test" contenteditable="true">Hello, some <b>bold</b> and <i>italic and <b>bold</b></i> text</div>
<div id="caretPos"></div>
<div id="caretPost"></div>
<script type="text/javascript">
function getCaretCharacterOffsetWithin(element) {
    var begin = 0;
    var end = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.startContainer, range.startOffset);
        begin = preCaretRange.toString().length;
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        end = preCaretRange.toString().length;
    }
    return "Selection start: " + begin + "<br>Selection end: " + end;
}

function showCaretPos() {
    var el = document.getElementById("test");
    var caretPosEl = document.getElementById("caretPos");
    caretPosEl.innerHTML =  getCaretCharacterOffsetWithin(el);
}

document.body.onkeyup = showCaretPos;
document.body.onmouseup = showCaretPos;
</script>

理解すれば、ロジックは非常に単純です。開始コンテナと終了コンテナがあります。プレーンテキストの場合: それらは同じになります。ただし、HTML タグは文を断片化し、開始部分に含まれる部分と終了部分に異なる部分が含まれるようにします。

私が使用setStart()している場所を使用setEnd()してパラメーターを逆にすると、インデックスを逆にするのと同じになります (つまり、最初ではなく末尾が 0 になります)。

setEnd()したがって、開始を取得するには、開始パラメータを除いて、引き続き を使用します。

于 2012-09-01T05:26:35.407 に答える