Question

在满足的文本选择中引起了我很大的问题...

我试着以与此代码部分相同的方式获得开始和结束选择点：

（因为在contenteditable中，有不同的标签，我需要在失去焦点后重新选择可见的选定文本（文本节点？）

我真的迷失了，有人知道教程或其他事情来理解网络浏览器中的选择吗？

谢谢， Yeppao

Answer 1

因为我只使用Chrome，所以我切断了else，因为它不适用。所以这是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标签会对句子进行分段，并使start包含一个部分，而end包含不同的部分。

如果您使用setStart()我正在使用setEnd()并反转参数，它将与反转索引相同（即结束将为0而不是开头）

因此，为了获取开头，您仍然使用setEnd()，但启动参数除外。

窗口文本选择在一个contenteditable

1 个答案: