javascript - Contenteditable DIV - 如何确定光标是在内容的开头还是结尾

Question

我有一个内容可编辑的 div，其中包含典型的所见即所得编辑器 html(粗体、 anchor 、列表)。

我需要确定当前光标是否位于 div 的开头和结尾，onKeyDown。这样做的原因是，根据光标位置和按下的键，我可能想将这个 div 与退格键上的前一个 div 合并，或者在回车时创建一个新的后续 div。

我一直在摆弄范围，但是当您在元素内部使用 html 时，事情会变得相当复杂。

我希望我一定忽略了一些简单的解决方案。

是否有一种相对简单的方法来确定这一点 - 我愿意使用像 Rangy 这样的库。

谢谢!

编辑:我在想这些:

$('.mycontenteditable').bind('keydown', handle_keydown)

handle_keydown = function(e) {

  range = window.getSelection().getRangeAt(0)
  start_range = document.createRange()
  start_range.selectNodeContents(this.firstChild)
  start_range.collapse(true) // collapse to start
  is_start = start_range.compareBoundaryPoints(Range.START_TO_START,range)
  end_range = document.createRange()
  end_range.selectNodeContents(this.lastChild)
  end_range.collapse(false)
  is_end = end_range.compareBoundaryPoints(Range.END_TO_END,range)
}

我会遇到这样的问题吗？

Answer 1

除了使用 toString() 外，我会使用与您类似的方法Range的方法|对象而不是 cloneContents()以避免不必要的克隆。此外，在 IE < 9(不支持范围)中，您可以对 text 使用类似的方法。 TextRange的属性(property).

请注意，当内容中有前导和/或尾随换行符时，这会出现问题，因为 toString()范围的方法就像 textContent 一样工作节点的属性，只考虑文本节点，因此不考虑 <br> 隐含的换行符或 block 元素。也没有考虑 CSS:例如，通过 display: none 隐藏的元素内的文本包括在内。

这是一个例子:

现场演示:http://jsfiddle.net/YA3Pu/1/

代码:

function getSelectionTextInfo(el) {
    var atStart = false, atEnd = false;
    var selRange, testRange;
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            selRange = sel.getRangeAt(0);
            testRange = selRange.cloneRange();

            testRange.selectNodeContents(el);
            testRange.setEnd(selRange.startContainer, selRange.startOffset);
            atStart = (testRange.toString() == "");

            testRange.selectNodeContents(el);
            testRange.setStart(selRange.endContainer, selRange.endOffset);
            atEnd = (testRange.toString() == "");
        }
    } else if (document.selection && document.selection.type != "Control") {
        selRange = document.selection.createRange();
        testRange = selRange.duplicate();

        testRange.moveToElementText(el);
        testRange.setEndPoint("EndToStart", selRange);
        atStart = (testRange.text == "");

        testRange.moveToElementText(el);
        testRange.setEndPoint("StartToEnd", selRange);
        atEnd = (testRange.text == "");
    }

    return { atStart: atStart, atEnd: atEnd };
}