给定contentEditable Div如何将光标设置到特定位置?

时间:2011-11-02 21:30:38

标签: javascript jquery html html5 contenteditable

给出一个contentEditable div,如下所示:

<div contenteditable="true">Here is some text, hello world.</div>

如何在s输入后立即将光标设置在位置6上?

我一直在尝试使用:

savedRange = window.getSelection().getRangeAt(0);

然后像这样修改值:

savedRange.startOffset = 6
savedRange.endOffset = 6

但这并没有更新savedRange。

任何想法如何在div中获取光标/插入符号?感谢

1 个答案:

答案 0 :(得分:4)

那是位置7.无论如何,假设你给你的可编辑<div> id为“myDiv”,这是怎么回事。注意这不适用于IE&lt; 9,它具有完全不同的范围和选择API。

if (window.getSelection) {
    var sel = window.getSelection();
    var textNode = document.getElementById("myDiv").firstChild;
    var range = document.createRange();
    range.setStart(textNode, 7);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
}