blocks|key|1830770|text|这与基于标准的浏览器兼容，但在IE中可能会失败。我提供它作为一个起点。IE不支持DOM范围。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1830771|var+editable+=+document.getElementById('editable'),
++++selection,+range;

//+Populates+selection+and+range+variables
var+captureSelection+=+function(e)+{
++++//+Don't+capture+selection+outside+editable+region
++++var+isOrContainsAnchor+=+false,
++++++++isOrContainsFocus+=+false,
++++++++sel+=+window.getSelection(),
++++++++parentAnchor+=+sel.anchorNode,
++++++++parentFocus+=+sel.focusNode;

++++while(parentAnchor+&&+parentAnchor+!=+document.documentElement)+{
++++++++if(parentAnchor+==+editable)+{
++++++++++++isOrContainsAnchor+=+true;
++++++++}
++++++++parentAnchor+=+parentAnchor.parentNode;
++++}

++++while(parentFocus+&&+parentFocus+!=+document.documentElement)+{
++++++++if(parentFocus+==+editable)+{
++++++++++++isOrContainsFocus+=+true;
++++++++}
++++++++parentFocus+=+parentFocus.parentNode;
++++}

++++if(!isOrContainsAnchor+%7C%7C+!isOrContainsFocus)+{
++++++++return;
++++}

++++selection+=+window.getSelection();

++++//+Get+range+(standards)
++++if(selection.getRangeAt+!==+undefined)+{
++++++++range+=+selection.getRangeAt(0);

++++//+Get+range+(Safari+2)
++++}+else+if(
++++++++document.createRange+&&
++++++++selection.anchorNode+&&
++++++++selection.anchorOffset+&&
++++++++selection.focusNode+&&
++++++++selection.focusOffset
++++)+{
++++++++range+=+document.createRange();
++++++++range.setStart(selection.anchorNode,+selection.anchorOffset);
++++++++range.setEnd(selection.focusNode,+selection.focusOffset);
++++}+else+{
++++++++//+Failure+here,+not+handled+by+the+rest+of+the+script.
++++++++//+Probably+IE+or+some+older+browser
++++}
};

//+Recalculate+selection+while+typing
editable.onkeyup+=+captureSelection;

//+Recalculate+selection+after+clicking/drag-selecting
editable.onmousedown+=+function(e)+{
++++editable.className+=+editable.className+%2B+'+selecting';
};
document.onmouseup+=+function(e)+{
++++if(editable.className.match(/\sselecting(\s%7C$)/))+{
++++++++editable.className+=+editable.className.replace(/+selecting(\s%7C$)/,+'');
++++++++captureSelection();
++++}
};

editable.onblur+=+function(e)+{
++++var+cursorStart+=+document.createElement('span'),
++++++++collapsed+=+!!range.collapsed;

++++cursorStart.id+=+'cursorStart';
++++cursorStart.appendChild(document.createTextNode('—'));

++++//+Insert+beginning+cursor+marker
++++range.insertNode(cursorStart);

++++//+Insert+end+cursor+marker+if+any+text+is+selected
++++if(!collapsed)+{
++++++++var+cursorEnd+=+document.createElement('span');
++++++++cursorEnd.id+=+'cursorEnd';
++++++++range.collapse();
++++++++range.insertNode(cursorEnd);
++++}
};

//+Add+callbacks+to+afterFocus+to+be+called+after+cursor+is+replaced
//+if+you+like,+this+would+be+useful+for+styling+buttons+and+so+on
var+afterFocus+=+[];
editable.onfocus+=+function(e)+{
++++//+Slight+delay+will+avoid+the+initial+selection
++++//+(at+start+or+of+contents+depending+on+browser)+being+mistaken
++++setTimeout(function()+{
++++++++var+cursorStart+=+document.getElementById('cursorStart'),
++++++++++++cursorEnd+=+document.getElementById('cursorEnd');

++++++++//+Don't+do+anything+if+user+is+creating+a+new+selection
++++++++if(editable.className.match(/\sselecting(\s%7C$)/))+{
++++++++++++if(cursorStart)+{
++++++++++++++++cursorStart.parentNode.removeChild(cursorStart);
++++++++++++}
++++++++++++if(cursorEnd)+{
++++++++++++++++cursorEnd.parentNode.removeChild(cursorEnd);
++++++++++++}
++++++++}+else+if(cursorStart)+{
++++++++++++captureSelection();
++++++++++++var+range+=+document.createRange();

++++++++++++if(cursorEnd)+{
++++++++++++++++range.setStartAfter(cursorStart);
++++++++++++++++range.setEndBefore(cursorEnd);

++++++++++++++++//+Delete+cursor+markers
++++++++++++++++cursorStart.parentNode.removeChild(cursorStart);
++++++++++++++++cursorEnd.parentNode.removeChild(cursorEnd);

++++++++++++++++//+Select+range
++++++++++++++++selection.removeAllRanges();
++++++++++++++++selection.addRange(range);
++++++++++++}+else+{
++++++++++++++++range.selectNode(cursorStart);

++++++++++++++++//+Select+range
++++++++++++++++selection.removeAllRanges();
++++++++++++++++selection.addRange(range);

++++++++++++++++//+Delete+cursor+marker
++++++++++++++++document.execCommand('delete',+false,+null);
++++++++++++}
++++++++}

++++++++//+Call+callbacks+here
++++++++for(var+i+=+0;+i+<+afterFocus.length;+i%2B%2B)+{
++++++++++++afterFocus[i]();
++++++++}
++++++++afterFocus+=+[];

++++++++//+Register+selection+again
++++++++captureSelection();
++++},+10);
};|code-block|syntax|javascript|1830772|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is compatible with the standards-based browsers, but will probably fail in IE. I'm providing it as a starting point. IE doesn't support DOM Range.

<pre><code>var editable = document.getElementById('editable'),
 selection, range;

// Populates selection and range variables
var captureSelection = function(e) {
 // Don't capture selection outside editable region
 var isOrContainsAnchor = false,
 isOrContainsFocus = false,
 sel = window.getSelection(),
 parentAnchor = sel.anchorNode,
 parentFocus = sel.focusNode;

 while(parentAnchor &amp;&amp; parentAnchor != document.documentElement) {
 if(parentAnchor == editable) {
 isOrContainsAnchor = true;
 }
 parentAnchor = parentAnchor.parentNode;
 }

 while(parentFocus &amp;&amp; parentFocus != document.documentElement) {
 if(parentFocus == editable) {
 isOrContainsFocus = true;
 }
 parentFocus = parentFocus.parentNode;
 }

 if(!isOrContainsAnchor || !isOrContainsFocus) {
 return;
 }

 selection = window.getSelection();

 // Get range (standards)
 if(selection.getRangeAt !== undefined) {
 range = selection.getRangeAt(0);

 // Get range (Safari 2)
 } else if(
 document.createRange &amp;&amp;
 selection.anchorNode &amp;&amp;
 selection.anchorOffset &amp;&amp;
 selection.focusNode &amp;&amp;
 selection.focusOffset
 ) {
 range = document.createRange();
 range.setStart(selection.anchorNode, selection.anchorOffset);
 range.setEnd(selection.focusNode, selection.focusOffset);
 } else {
 // Failure here, not handled by the rest of the script.
 // Probably IE or some older browser
 }
};

// Recalculate selection while typing
editable.onkeyup = captureSelection;

// Recalculate selection after clicking/drag-selecting
editable.onmousedown = function(e) {
 editable.className = editable.className + ' selecting';
};
document.onmouseup = function(e) {
 if(editable.className.match(/\sselecting(\s|$)/)) {
 editable.className = editable.className.replace(/ selecting(\s|$)/, '');
 captureSelection();
 }
};

editable.onblur = function(e) {
 var cursorStart = document.createElement('span'),
 collapsed = !!range.collapsed;

 cursorStart.id = 'cursorStart';
 cursorStart.appendChild(document.createTextNode('—'));

 // Insert beginning cursor marker
 range.insertNode(cursorStart);

 // Insert end cursor marker if any text is selected
 if(!collapsed) {
 var cursorEnd = document.createElement('span');
 cursorEnd.id = 'cursorEnd';
 range.collapse();
 range.insertNode(cursorEnd);
 }
};

// Add callbacks to afterFocus to be called after cursor is replaced
// if you like, this would be useful for styling buttons and so on
var afterFocus = [];
editable.onfocus = function(e) {
 // Slight delay will avoid the initial selection
 // (at start or of contents depending on browser) being mistaken
 setTimeout(function() {
 var cursorStart = document.getElementById('cursorStart'),
 cursorEnd = document.getElementById('cursorEnd');

 // Don't do anything if user is creating a new selection
 if(editable.className.match(/\sselecting(\s|$)/)) {
 if(cursorStart) {
 cursorStart.parentNode.removeChild(cursorStart);
 }
 if(cursorEnd) {
 cursorEnd.parentNode.removeChild(cursorEnd);
 }
 } else if(cursorStart) {
 captureSelection();
 var range = document.createRange();

 if(cursorEnd) {
 range.setStartAfter(cursorStart);
 range.setEndBefore(cursorEnd);

 // Delete cursor markers
 cursorStart.parentNode.removeChild(cursorStart);
 cursorEnd.parentNode.removeChild(cursorEnd);

 // Select range
 selection.removeAllRanges();
 selection.addRange(range);
 } else {
 range.selectNode(cursorStart);

 // Select range
 selection.removeAllRanges();
 selection.addRange(range);

 // Delete cursor marker
 document.execCommand('delete', false, null);
 }
 }

 // Call callbacks here
 for(var i = 0; i &lt; afterFocus.length; i++) {
 afterFocus[i]();
 }
 afterFocus = [];

 // Register selection again
 captureSelection();
 }, 10);
};
</code></pre>

blocks|key|1830917|text|在Firefox中，您可能将div的文本放在一个子节点(o_div.childNodes[0])中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1830918|var+range+=+document.createRange();

range.setStart(o_div.childNodes[0],last_caret_pos);
range.setEnd(o_div.childNodes[0],last_caret_pos);
range.collapse(false);

var+sel+=+window.getSelection();+
sel.removeAllRanges();
sel.addRange(range);|code-block|syntax|javascript|1830919|entityMap^0|S|J|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

In Firefox you might have the text of the div in a child node (<code>o_div.childNodes[0]</code>) 

<pre><code>var range = document.createRange();

range.setStart(o_div.childNodes[0],last_caret_pos);
range.setEnd(o_div.childNodes[0],last_caret_pos);
range.collapse(false);

var sel = window.getSelection(); 
sel.removeAllRanges();
sel.addRange(range);
</code></pre>

blocks|key|2045072|text|我遇到了一个相关的情况，我特别需要将光标位置设置为可内容编辑div的末尾。我不想使用像Rangy这样的完全成熟的库，而且许多解决方案都太重了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2045073|最后，我想出了这个简单的jQuery函数来将克拉位置设置为可内容编辑div的末尾：|2045074|$.fn.focusEnd+=+function()+{
++++$(this).focus();
++++var+tmp+=+$('<span+/>').appendTo($(this)),
++++++++node+=+tmp.get(0),
++++++++range+=+null,
++++++++sel+=+null;

++++if+(document.selection)+{
++++++++range+=+document.body.createTextRange();
++++++++range.moveToElementText(node);
++++++++range.select();
++++}+else+if+(window.getSelection)+{
++++++++range+=+document.createRange();
++++++++range.selectNode(node);
++++++++sel+=+window.getSelection();
++++++++sel.removeAllRanges();
++++++++sel.addRange(range);
++++}
++++tmp.remove();
++++return+this;
}|code-block|syntax|javascript|2045075|原理很简单:在可编辑对象的末尾附加一个跨度，选择它，然后删除跨度-在div的末尾留下一个光标。您可以调整此解决方案以将跨度插入到您想要的任何位置，从而将光标放在特定的点上。|2045076|用法很简单：|2045077|$('#editable').focusEnd();|2045078|就这样!|2045079|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I had a related situation, where I specifically needed to set the cursor position to the END of a contenteditable div. I didn't want to use a full fledged library like Rangy, and many solutions were far too heavyweight. 

In the end, I came up with this simple jQuery function to set the carat position to the end of a contenteditable div:

<pre><code>$.fn.focusEnd = function() {
 $(this).focus();
 var tmp = $('&lt;span /&gt;').appendTo($(this)),
 node = tmp.get(0),
 range = null,
 sel = null;

 if (document.selection) {
 range = document.body.createTextRange();
 range.moveToElementText(node);
 range.select();
 } else if (window.getSelection) {
 range = document.createRange();
 range.selectNode(node);
 sel = window.getSelection();
 sel.removeAllRanges();
 sel.addRange(range);
 }
 tmp.remove();
 return this;
}
</code></pre>

The theory is simple: append a span to the end of the editable, select it, and then remove the span - leaving us with a cursor at the end of the div. You could adapt this solution to insert the span wherever you want, thus putting the cursor at a specific spot.

Usage is simple:

<pre><code>$('#editable').focusEnd();
</code></pre>

That's it!

blocks|key|2045125|text|在尝试之后，我修改了上面的无眼症的答案，并把它变成了一个jQuery插件，这样你就可以这样做了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2045126|var+html+=+"The+quick+brown+fox";
$div.html(html);

//+Select+at+the+text+"quick":
$div.setContentEditableSelection(4,+5);

//+Select+at+the+beginning+of+the+contenteditable+div:
$div.setContentEditableSelection(0);

//+Select+at+the+end+of+the+contenteditable+div:
$div.setContentEditableSelection(html.length);|code-block|syntax|javascript|2045127|请原谅冗长的代码帖子，但它可能会对某些人有所帮助：|2045128|$.fn.setContentEditableSelection+=+function(position,+length)+{
++++if+(typeof(length)+==+"undefined")+{
++++++++length+=+0;
++++}

++++return+this.each(function()+{
++++++++var+$this+=+$(this);
++++++++var+editable+=+this;
++++++++var+selection;
++++++++var+range;

++++++++var+html+=+$this.html();
++++++++html+=+html.substring(0,+position)+%2B
++++++++++++'<a+id="cursorStart"></a>'+%2B
++++++++++++html.substring(position,+position+%2B+length)+%2B
++++++++++++'<a+id="cursorEnd"></a>'+%2B
++++++++++++html.substring(position+%2B+length,+html.length);
++++++++console.log(html);
++++++++$this.html(html);

++++++++//+Populates+selection+and+range+variables
++++++++var+captureSelection+=+function(e)+{
++++++++++++//+Don't+capture+selection+outside+editable+region
++++++++++++var+isOrContainsAnchor+=+false,
++++++++++++++++isOrContainsFocus+=+false,
++++++++++++++++sel+=+window.getSelection(),
++++++++++++++++parentAnchor+=+sel.anchorNode,
++++++++++++++++parentFocus+=+sel.focusNode;

++++++++++++while+(parentAnchor+&&+parentAnchor+!=+document.documentElement)+{
++++++++++++++++if+(parentAnchor+==+editable)+{
++++++++++++++++++++isOrContainsAnchor+=+true;
++++++++++++++++}
++++++++++++++++parentAnchor+=+parentAnchor.parentNode;
++++++++++++}

++++++++++++while+(parentFocus+&&+parentFocus+!=+document.documentElement)+{
++++++++++++++++if+(parentFocus+==+editable)+{
++++++++++++++++++++isOrContainsFocus+=+true;
++++++++++++++++}
++++++++++++++++parentFocus+=+parentFocus.parentNode;
++++++++++++}

++++++++++++if+(!isOrContainsAnchor+%7C%7C+!isOrContainsFocus)+{
++++++++++++++++return;
++++++++++++}

++++++++++++selection+=+window.getSelection();

++++++++++++//+Get+range+(standards)
++++++++++++if+(selection.getRangeAt+!==+undefined)+{
++++++++++++++++range+=+selection.getRangeAt(0);

++++++++++++++++//+Get+range+(Safari+2)
++++++++++++}+else+if+(
++++++++++++++++document.createRange+&&
++++++++++++++++selection.anchorNode+&&
++++++++++++++++selection.anchorOffset+&&
++++++++++++++++selection.focusNode+&&
++++++++++++++++selection.focusOffset
++++++++++++)+{
++++++++++++++++range+=+document.createRange();
++++++++++++++++range.setStart(selection.anchorNode,+selection.anchorOffset);
++++++++++++++++range.setEnd(selection.focusNode,+selection.focusOffset);
++++++++++++}+else+{
++++++++++++++++//+Failure+here,+not+handled+by+the+rest+of+the+script.
++++++++++++++++//+Probably+IE+or+some+older+browser
++++++++++++}
++++++++};

++++++++//+Slight+delay+will+avoid+the+initial+selection
++++++++//+(at+start+or+of+contents+depending+on+browser)+being+mistaken
++++++++setTimeout(function()+{
++++++++++++var+cursorStart+=+document.getElementById('cursorStart');
++++++++++++var+cursorEnd+=+document.getElementById('cursorEnd');

++++++++++++//+Don't+do+anything+if+user+is+creating+a+new+selection
++++++++++++if+(editable.className.match(/\sselecting(\s%7C$)/))+{
++++++++++++++++if+(cursorStart)+{
++++++++++++++++++++cursorStart.parentNode.removeChild(cursorStart);
++++++++++++++++}
++++++++++++++++if+(cursorEnd)+{
++++++++++++++++++++cursorEnd.parentNode.removeChild(cursorEnd);
++++++++++++++++}
++++++++++++}+else+if+(cursorStart)+{
++++++++++++++++captureSelection();
++++++++++++++++range+=+document.createRange();

++++++++++++++++if+(cursorEnd)+{
++++++++++++++++++++range.setStartAfter(cursorStart);
++++++++++++++++++++range.setEndBefore(cursorEnd);

++++++++++++++++++++//+Delete+cursor+markers
++++++++++++++++++++cursorStart.parentNode.removeChild(cursorStart);
++++++++++++++++++++cursorEnd.parentNode.removeChild(cursorEnd);

++++++++++++++++++++//+Select+range
++++++++++++++++++++selection.removeAllRanges();
++++++++++++++++++++selection.addRange(range);
++++++++++++++++}+else+{
++++++++++++++++++++range.selectNode(cursorStart);

++++++++++++++++++++//+Select+range
++++++++++++++++++++selection.removeAllRanges();
++++++++++++++++++++selection.addRange(range);

++++++++++++++++++++//+Delete+cursor+marker
++++++++++++++++++++document.execCommand('delete',+false,+null);
++++++++++++++++}
++++++++++++}

++++++++++++//+Register+selection+again
++++++++++++captureSelection();
++++++++},+10);
++++});
};|2045129|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

After playing around I've modified eyelidlessness' answer above and made it a jQuery plugin so you can just do one of these:

<pre><code>var html = "The quick brown fox";
$div.html(html);

// Select at the text "quick":
$div.setContentEditableSelection(4, 5);

// Select at the beginning of the contenteditable div:
$div.setContentEditableSelection(0);

// Select at the end of the contenteditable div:
$div.setContentEditableSelection(html.length);
</code></pre>

Excuse the long code post, but it may help someone:

<pre><code>$.fn.setContentEditableSelection = function(position, length) {
 if (typeof(length) == "undefined") {
 length = 0;
 }

 return this.each(function() {
 var $this = $(this);
 var editable = this;
 var selection;
 var range;

 var html = $this.html();
 html = html.substring(0, position) +
 '&lt;a id="cursorStart"&gt;&lt;/a&gt;' +
 html.substring(position, position + length) +
 '&lt;a id="cursorEnd"&gt;&lt;/a&gt;' +
 html.substring(position + length, html.length);
 console.log(html);
 $this.html(html);

 // Populates selection and range variables
 var captureSelection = function(e) {
 // Don't capture selection outside editable region
 var isOrContainsAnchor = false,
 isOrContainsFocus = false,
 sel = window.getSelection(),
 parentAnchor = sel.anchorNode,
 parentFocus = sel.focusNode;

 while (parentAnchor &amp;&amp; parentAnchor != document.documentElement) {
 if (parentAnchor == editable) {
 isOrContainsAnchor = true;
 }
 parentAnchor = parentAnchor.parentNode;
 }

 while (parentFocus &amp;&amp; parentFocus != document.documentElement) {
 if (parentFocus == editable) {
 isOrContainsFocus = true;
 }
 parentFocus = parentFocus.parentNode;
 }

 if (!isOrContainsAnchor || !isOrContainsFocus) {
 return;
 }

 selection = window.getSelection();

 // Get range (standards)
 if (selection.getRangeAt !== undefined) {
 range = selection.getRangeAt(0);

 // Get range (Safari 2)
 } else if (
 document.createRange &amp;&amp;
 selection.anchorNode &amp;&amp;
 selection.anchorOffset &amp;&amp;
 selection.focusNode &amp;&amp;
 selection.focusOffset
 ) {
 range = document.createRange();
 range.setStart(selection.anchorNode, selection.anchorOffset);
 range.setEnd(selection.focusNode, selection.focusOffset);
 } else {
 // Failure here, not handled by the rest of the script.
 // Probably IE or some older browser
 }
 };

 // Slight delay will avoid the initial selection
 // (at start or of contents depending on browser) being mistaken
 setTimeout(function() {
 var cursorStart = document.getElementById('cursorStart');
 var cursorEnd = document.getElementById('cursorEnd');

 // Don't do anything if user is creating a new selection
 if (editable.className.match(/\sselecting(\s|$)/)) {
 if (cursorStart) {
 cursorStart.parentNode.removeChild(cursorStart);
 }
 if (cursorEnd) {
 cursorEnd.parentNode.removeChild(cursorEnd);
 }
 } else if (cursorStart) {
 captureSelection();
 range = document.createRange();

 if (cursorEnd) {
 range.setStartAfter(cursorStart);
 range.setEndBefore(cursorEnd);

 // Delete cursor markers
 cursorStart.parentNode.removeChild(cursorStart);
 cursorEnd.parentNode.removeChild(cursorEnd);

 // Select range
 selection.removeAllRanges();
 selection.addRange(range);
 } else {
 range.selectNode(cursorStart);

 // Select range
 selection.removeAllRanges();
 selection.addRange(range);

 // Delete cursor marker
 document.execCommand('delete', false, null);
 }
 }

 // Register selection again
 captureSelection();
 }, 10);
 });
};
</code></pre>

blocks|key|2045381|text|您可以利用现代浏览器支持的selectNodeContents。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2045382|var+el+=+document.getElementById('idOfYoursContentEditable');
var+selection+=+window.getSelection();
var+range+=+document.createRange();
selection.removeAllRanges();
range.selectNodeContents(el);
range.collapse(false);
selection.addRange(range);
el.focus();|code-block|syntax|javascript|2045383|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Range/selectNodeContents^0|D|I|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

You can leverage <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range/selectNodeContents" rel="nofollow noreferrer">selectNodeContents</a> which is supported by modern browsers.

<pre><code>var el = document.getElementById('idOfYoursContentEditable');
var selection = window.getSelection();
var range = document.createRange();
selection.removeAllRanges();
range.selectNodeContents(el);
range.collapse(false);
selection.addRange(range);
el.focus();
</code></pre>

I am after a definitive, cross-browser solution to set the cursor/caret position to the last known position when a contentEditable='on' &lt;div> regains focus. It appears default functionality of a content editable div is to move the caret/cursor to the beginning of the text in the div each time you click on it, which is undesirable.

I believe I would have to store in a variable the current cursor position when they are leaving focus of the div, and then re-set this when they have focus inside again, but I have not been able to put together, or find a working code sample yet.

If anybody has any thoughts, working code snippets or samples I'd be happy to see them.

I don't really have any code yet but here is what I do have:

<pre><code>&lt;script type="text/javascript"&gt;
// jQuery
$(document).ready(function() {
 $('#area').focus(function() { .. } // focus I would imagine I need.
}
&lt;/script&gt;
&lt;div id="area" contentEditable="true"&gt;&lt;/div&gt;
</code></pre>

PS. I have tried this resource but it appears it does not work for a &lt;div>. Perhaps only for textarea (<a href="https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity">How to move cursor to end of contenteditable entity</a>)

Set cursor position on contentEditable <div>

jQuery

我正在寻找一个明确的、跨浏览器的解决方案，当contentEditable='on‘重新获得焦点时，将光标/插入符号的位置设置为最后一个已知位置。似乎内容可编辑div的默认功能是每次单击时将插入符号/光标移动到div中文本的开头，这是不可取的。我相信当它们离开div的焦点时，我将不得不将当前光标位置存储在一个变量中，然...

问在contentEditable <div>上设置光标位置
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在contentEditable <div>上设置光标位置EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在contentEditable <div>上设置光标位置
EN