javascript - 在 contentEditable div 中插入元素之后设置插入符位置

Question

我正在将一个元素插入到 contentEditable div 中，但浏览器将光标的位置设置在插入的元素之前。是否可以将光标设置在插入的元素之后，以便用户继续输入而无需重新调整光标位置？

Answer 1

下面的函数可以做到这一点。 DOM Level 2 Range 对象使这在大多数浏览器中变得容易。在 IE 中，您需要在要插入的节点后面插入一个标记元素，将所选内容移动到该元素，然后将其删除。

实例:http://jsfiddle.net/timdown/4N4ZD/

代码:

function insertNodeAtCaret(node) {
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(false);
            range.insertNode(node);
            range = range.cloneRange();
            range.selectNodeContents(node);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var html = (node.nodeType == 1) ? node.outerHTML : node.data;
        var id = "marker_" + ("" + Math.random()).slice(2);
        html += '<span id="' + id + '"></span>';
        var textRange = document.selection.createRange();
        textRange.collapse(false);
        textRange.pasteHTML(html);
        var markerSpan = document.getElementById(id);
        textRange.moveToElementText(markerSpan);
        textRange.select();
        markerSpan.parentNode.removeChild(markerSpan);
    }
}

或者，您可以使用我的 Rangy library 。等效的代码是

function insertNodeAtCaret(node) {
    var sel = rangy.getSelection();
    if (sel.rangeCount) {
        var range = sel.getRangeAt(0);
        range.collapse(false);
        range.insertNode(node);
        range.collapseAfter(node);
        sel.setSingleRange(range);
    }
}