javascript - 插入span-node，继续写

Question

我在向可编辑的 div 添加节点时遇到问题。

我想在一个范围内添加突出显示的文本，然后光标应该在添加的范围之外。

现在光标在添加的范围内。

我创建了一个 Fiddle 来演示它: http://jsfiddle.net/4N4ZD/633/

这是一些代码:

function insertNodeAtCaret() {
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(false);
            var span = document.createElement('span');
            span.innerHTML = 'TEXT';
            span.style.background = 'yellow';
            range.insertNode(span);

            range = range.cloneRange();
            range.selectNodeContents(span);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

Answer 1

找到解决方案。这是一个 fiddle :http://jsfiddle.net/4N4ZD/638/

诀窍是添加一个新的文本跨度并像这样使用方法“setStartAfter”:

    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        var span = document.createElement('span');
        span.innerHTML = 'TEXT';
        span.style.background = 'yellow';
        range.insertNode(span);

        var textNode = document.createTextNode('\u00A0');
        range.setStartAfter(span);
        range.insertNode(textNode);
        range.setStartAfter(textNode);
        range.collapse(true);

        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }