无法在内容可编辑的 div 中设置光标位置 - Jquery答案

【问题标题】：Unable to set cursor position in content editable div - Jquery无法在内容可编辑的 div 中设置光标位置 - Jquery
【发布时间】：2013-04-13 11:36:33
【问题描述】：

这是一个 jquery 代码，用于将光标在内容可编辑 div 中的位置设置为位置 10

var range,selection; var contentEditableElement = $("div#editMe");
if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
{
 range = document.createRange();
 range.selectNodeContents(contentEditableElement);
 range.collapse(true);
 range.setStart(contentEditableElement,0); 
 range.setEnd(contentEditableElement,10);
 selection = window.getSelection();
 selection.removeAllRanges();
 selection.addRange(range);
}

但是这个不起作用。有什么问题。 ??

【问题讨论】：

标签： jquery contenteditable

【解决方案1】：

这是一个工作示例。如果我只将文本放在 div 中，它似乎不起作用，我必须将每个字符都放在一个元素中。另请注意，您必须在 jquery 对象上使用 .get(0) 才能真正获得与 range.setStart 和 range.setEnd 一起使用的 dom 对象。

html:

<div id="editMe">
    <span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span>
</div>

<button onclick="do_select()">
    select characters
</button>

js:

function do_select()
{
    var element = $("div#editMe").get(0);
    var range = document.createRange();

    range.collapse(true);
    range.setStart(element,0); 
    range.setEnd(element,10);

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

http://jsfiddle.net/y8pWs/

【讨论】：