用Javascript移动光标位置？

Question

我希望将插入符号正好位于其当前位置前方四个位置,以便我可以正确插入一个标签.我已经在插入符号的位置处获得了HTML插入,但是当我插入HTML时,插入符号被遗忘.我花了大约一个小时左右的时间看各种方法来做这件事,我已经尝试了很多,但我不能让他们中的任何一个为我工作.这是我尝试过的最新方法:

function moveCaret(input, distance) {
    if(input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(distance, distance);
    } else if(input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd(distance);
        range.moveStart(distance);
        range.select();
    }
}

它绝对没有 - 不移动插入符,抛出任何错误或任何东西.这让我感到困惑.是的,我知道上面的方法集(应该)将插入符号从指定节点的开头(即input)开始设置在某个位置,但即使这样也不起作用.那么,我究竟做错了什么,我该怎么做呢？

---

编辑:基于ov提供的链接,我已经设法将一些东西拼凑在一起,最终做了一些事情:抛出一个错误.好极了!这是新代码:

this.moveCaret = function(distance) {
    if(that.win.getSelection) {
        var range = that.win.getSelection().getRangeAt(0);
        range.setStart(range.startOffset + distance);
    } else if (that.win.document.selection) {
        var range = that.win.document.selection.createRange();
        range.setStart(range.startOffset + distance);
    }
}

现在,这给出了错误Uncaught Error: NOT_FOUND_ERR: DOM Exception 8.有什么想法吗？

Answer 1

您拥有的代码片段用于文本输入和textareas,而不是contenteditable元素.

如果您的所有内容都在一个文本节点中并且选择完全包含在其中,则以下内容适用于所有主流浏览器,包括IE 6.

演示:http://jsfiddle.net/9sdrZ/

码:

function moveCaret(win, charCount) {
    var sel, range;
    if (win.getSelection) {
        // IE9+ and other browsers
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var textNode = sel.focusNode;
            var newOffset = sel.focusOffset + charCount;
            sel.collapse(textNode, Math.min(textNode.length, newOffset));
        }
    } else if ( (sel = win.document.selection) ) {
        // IE <= 8
        if (sel.type != "Control") {
            range = sel.createRange();
            range.move("character", charCount);
            range.select();
        }
    }
}