blocks|key|1110685|text|Geowa4的解决方案将适用于文本区域，但不适用于可内容编辑的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1110686|此解决方案用于将插入符号移动到可内容编辑元素的末尾。它应该可以在所有支持contenteditable的浏览器中工作。|1110687|function+setEndOfContenteditable(contentEditableElement)
{
++++var+range,selection;
++++if(document.createRange)//Firefox,+Chrome,+Opera,+Safari,+IE+9%2B
++++{
++++++++range+=+document.createRange();//Create+a+range+(a+range+is+a+like+the+selection+but+invisible)
++++++++range.selectNodeContents(contentEditableElement);//Select+the+entire+contents+of+the+element+with+the+range
++++++++range.collapse(false);//collapse+the+range+to+the+end+point.+false+means+collapse+to+end+rather+than+the+start
++++++++selection+=+window.getSelection();//get+the+selection+object+(allows+you+to+change+selection)
++++++++selection.removeAllRanges();//remove+any+selections+already+made
++++++++selection.addRange(range);//make+the+range+you+have+just+created+the+visible+selection
++++}
++++else+if(document.selection)//IE+8+and+lower
++++{+
++++++++range+=+document.body.createTextRange();//Create+a+range+(a+range+is+a+like+the+selection+but+invisible)
++++++++range.moveToElementText(contentEditableElement);//Select+the+entire+contents+of+the+element+with+the+range
++++++++range.collapse(false);//collapse+the+range+to+the+end+point.+false+means+collapse+to+end+rather+than+the+start
++++++++range.select();//Select+the+range+(make+it+the+visible+selection
++++}
}|code-block|syntax|javascript|1110688|它可以由类似于以下内容的代码使用：|1110689|elem+=+document.getElementById('txt1');//This+is+the+element+that+you+want+to+move+the+caret+to+the+end+of
setEndOfContenteditable(elem);|1110690|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Geowa4's solution will work for a textarea, but not for a contenteditable element.

This solution is for moving the caret to the end of a contenteditable element. It should work in all browsers which support contenteditable.

<pre><code>function setEndOfContenteditable(contentEditableElement)
{
 var range,selection;
 if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
 {
 range = document.createRange();//Create a range (a range is a like the selection but invisible)
 range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
 range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
 selection = window.getSelection();//get the selection object (allows you to change selection)
 selection.removeAllRanges();//remove any selections already made
 selection.addRange(range);//make the range you have just created the visible selection
 }
 else if(document.selection)//IE 8 and lower
 { 
 range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
 range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
 range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
 range.select();//Select the range (make it the visible selection
 }
}
</code></pre>

It can be used by code similar to:

<pre><code>elem = document.getElementById('txt1');//This is the element that you want to move the caret to the end of
setEndOfContenteditable(elem);
</code></pre>

blocks|key|1419911|text|还有另一个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1419912|如果contenteditable+div不包含其他多行元素，那么Nico+Burns的解决方案就可以工作。|offset|length|style|CODE|1419913|例如，如果一个div包含其他div，并且这些其他div中包含其他内容，则可能会出现一些问题。|1419914|为了解决它们，我安排了以下解决方案，这是对Nico的解决方案的改进：|1419915|//Namespace+management+idea+from+http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
(function(+cursorManager+)+{

++++//From:+http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
++++var+voidNodeTags+=+['AREA',+'BASE',+'BR',+'COL',+'EMBED',+'HR',+'IMG',+'INPUT',+'KEYGEN',+'LINK',+'MENUITEM',+'META',+'PARAM',+'SOURCE',+'TRACK',+'WBR',+'BASEFONT',+'BGSOUND',+'FRAME',+'ISINDEX'];

++++//From:+https://stackoverflow.com/questions/237104/array-containsobj-in-javascript
++++Array.prototype.contains+=+function(obj)+{
++++++++var+i+=+this.length;
++++++++while+(i--)+{
++++++++++++if+(this[i]+===+obj)+{
++++++++++++++++return+true;
++++++++++++}
++++++++}
++++++++return+false;
++++}

++++//Basic+idea+from:+https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text
++++function+canContainText(node)+{
++++++++if(node.nodeType+==+1)+{+//is+an+element+node
++++++++++++return+!voidNodeTags.contains(node.nodeName);
++++++++}+else+{+//is+not+an+element+node
++++++++++++return+false;
++++++++}
++++};

++++function+getLastChildElement(el){
++++++++var+lc+=+el.lastChild;
++++++++while(lc+&&+lc.nodeType+!=+1)+{
++++++++++++if(lc.previousSibling)
++++++++++++++++lc+=+lc.previousSibling;
++++++++++++else
++++++++++++++++break;
++++++++}
++++++++return+lc;
++++}

++++//Based+on+Nico+Burns's+answer
++++cursorManager.setEndOfContenteditable+=+function(contentEditableElement)
++++{

++++++++while(getLastChildElement(contentEditableElement)+&&
++++++++++++++canContainText(getLastChildElement(contentEditableElement)))+{
++++++++++++contentEditableElement+=+getLastChildElement(contentEditableElement);
++++++++}

++++++++var+range,selection;
++++++++if(document.createRange)//Firefox,+Chrome,+Opera,+Safari,+IE+9%2B
++++++++{++++
++++++++++++range+=+document.createRange();//Create+a+range+(a+range+is+a+like+the+selection+but+invisible)
++++++++++++range.selectNodeContents(contentEditableElement);//Select+the+entire+contents+of+the+element+with+the+range
++++++++++++range.collapse(false);//collapse+the+range+to+the+end+point.+false+means+collapse+to+end+rather+than+the+start
++++++++++++selection+=+window.getSelection();//get+the+selection+object+(allows+you+to+change+selection)
++++++++++++selection.removeAllRanges();//remove+any+selections+already+made
++++++++++++selection.addRange(range);//make+the+range+you+have+just+created+the+visible+selection
++++++++}
++++++++else+if(document.selection)//IE+8+and+lower
++++++++{+
++++++++++++range+=+document.body.createTextRange();//Create+a+range+(a+range+is+a+like+the+selection+but+invisible)
++++++++++++range.moveToElementText(contentEditableElement);//Select+the+entire+contents+of+the+element+with+the+range
++++++++++++range.collapse(false);//collapse+the+range+to+the+end+point.+false+means+collapse+to+end+rather+than+the+start
++++++++++++range.select();//Select+the+range+(make+it+the+visible+selection
++++++++}
++++}

}(+window.cursorManager+=+window.cursorManager+%7C%7C+{}));|code-block|syntax|javascript|1419916|用法：|1419917|var+editableDiv+=+document.getElementById("my_contentEditableDiv");
cursorManager.setEndOfContenteditable(editableDiv);|1419918|这样，光标肯定会定位在最后一个元素的末尾，最终嵌套。|1419919|while+EDIT+#1：为了更通用，while语句还应该考虑不能包含文本的所有其他标记。这些元素被命名为空元素，在this+question中有一些关于如何测试元素是否为空的方法。因此，假设存在一个名为canContainText的函数，如果参数不是空元素，该函数将返回true，下面的代码行：|1419920|contentEditableElement.lastChild.tagName.toLowerCase()+!=+'br'|1419921|应替换为：|1419922|canContainText(getLastChildElement(contentEditableElement))|1419923|EDIT+#2：上述代码已完全更新，并对每一处更改进行了描述和讨论|BOLD|1419924|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/140293/nico-burns|1|2|https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text^0|0|2|F|X|A|0|0|0|L|4|1|0|0|0|0|0|2V|E|3T|4|1N|D|2|0|0|0|0|0|7|0^^$0|@$1|2|3|4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1J|8|@$D|1K|E|1L|F|G]]|9|@$D|1M|E|1N|1|1O]]|A|$]]|$1|H|3|I|5|6|7|1P|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1Q|8|@]|9|@$D|1R|E|1S|1|1T]]|A|$]]|$1|L|3|M|5|N|7|1U|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1V|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1W|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1X|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1Y|8|@$D|1Z|E|20|F|G]|$D|21|E|22|F|G]]|9|@$D|23|E|24|1|25]]|A|$]]|$1|Y|3|Z|5|N|7|26|8|@]|9|@]|A|$O|P]]|$1|10|3|11|5|6|7|27|8|@]|9|@]|A|$]]|$1|12|3|13|5|N|7|28|8|@]|9|@]|A|$O|P]]|$1|14|3|15|5|6|7|29|8|@$D|2A|E|2B|F|16]]|9|@]|A|$]]|$1|17|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|1E]]|1F|$5|1A|1B|1C|A|$1D|1E]]|1G|$5|1A|1B|1C|A|$1D|1H]]]]

There is also another problem.

The <a href="https://stackoverflow.com/users/140293/nico-burns">Nico Burns</a>'s solution works if the <code>contenteditable</code> div doesn't contain other multilined elements.

For instance, if a div contains other divs, and these other divs contain other stuff inside, could occur some problems.

In order to solve them, I've arranged the following solution, that is an improvement of the <a href="https://stackoverflow.com/users/140293/nico-burns">Nico</a>'s one:

<pre><code>//Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
(function( cursorManager ) {

 //From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
 var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];

 //From: https://stackoverflow.com/questions/237104/array-containsobj-in-javascript
 Array.prototype.contains = function(obj) {
 var i = this.length;
 while (i--) {
 if (this[i] === obj) {
 return true;
 }
 }
 return false;
 }

 //Basic idea from: https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text
 function canContainText(node) {
 if(node.nodeType == 1) { //is an element node
 return !voidNodeTags.contains(node.nodeName);
 } else { //is not an element node
 return false;
 }
 };

 function getLastChildElement(el){
 var lc = el.lastChild;
 while(lc &amp;&amp; lc.nodeType != 1) {
 if(lc.previousSibling)
 lc = lc.previousSibling;
 else
 break;
 }
 return lc;
 }

 //Based on Nico Burns's answer
 cursorManager.setEndOfContenteditable = function(contentEditableElement)
 {

 while(getLastChildElement(contentEditableElement) &amp;&amp;
 canContainText(getLastChildElement(contentEditableElement))) {
 contentEditableElement = getLastChildElement(contentEditableElement);
 }

 var range,selection;
 if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
 { 
 range = document.createRange();//Create a range (a range is a like the selection but invisible)
 range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
 range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
 selection = window.getSelection();//get the selection object (allows you to change selection)
 selection.removeAllRanges();//remove any selections already made
 selection.addRange(range);//make the range you have just created the visible selection
 }
 else if(document.selection)//IE 8 and lower
 { 
 range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
 range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
 range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
 range.select();//Select the range (make it the visible selection
 }
 }

}( window.cursorManager = window.cursorManager || {}));
</code></pre>

Usage:

<pre><code>var editableDiv = document.getElementById("my_contentEditableDiv");
cursorManager.setEndOfContenteditable(editableDiv);
</code></pre>

In this way, the cursor is surely positioned at the end of the last element, eventually nested.

EDIT #1: In order to be more generic, the while statement should consider also all the other tags which cannot contain text. These elements are named void elements, and in <a href="https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text">this question</a> there are some methods on how to test if an element is void. So, assuming that exists a function called <code>canContainText</code> that returns <code>true</code> if the argument is not a void element, the following line of code:

<pre><code>contentEditableElement.lastChild.tagName.toLowerCase() != 'br'
</code></pre>

should be replaced with:

<pre><code>canContainText(getLastChildElement(contentEditableElement))
</code></pre>

EDIT #2: The above code is fully updated, with every changes described and discussed

blocks|key|1419930|text|可以通过范围将光标设置到末尾：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1419931|setCaretToEnd(target/*:+HTMLDivElement*/)+{
++const+range+=+document.createRange();
++const+sel+=+window.getSelection();
++range.selectNodeContents(target);
++range.collapse(false);
++sel.removeAllRanges();
++sel.addRange(range);
++target.focus();
++range.detach();+//+optimization

++//+set+scroll+to+the+end+if+multiline
++target.scrollTop+=+target.scrollHeight;+
}|code-block|syntax|javascript|1419932|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|$]]

It's possible to do set cursor to the end through the range:

<pre><code>setCaretToEnd(target/*: HTMLDivElement*/) {
 const range = document.createRange();
 const sel = window.getSelection();
 range.selectNodeContents(target);
 range.collapse(false);
 sel.removeAllRanges();
 sel.addRange(range);
 target.focus();
 range.detach(); // optimization

 // set scroll to the end if multiline
 target.scrollTop = target.scrollHeight; 
}
</code></pre>

blocks|key|4327407|text|我在尝试使元素可编辑时也遇到了类似的问题。这在Chrome和FireFox中是可能的，但在FireFox中，插入符号要么移到输入的开头，要么移到输入结束后的一个空格。我认为，试图编辑内容会让最终用户感到非常困惑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4327408|我尝试了几种方法都找不到解决方案。唯一对我起作用的是“绕过这个问题”，把一个普通的老式文本输入放在我的。现在它起作用了。似乎“内容可编辑”仍然是前沿技术，它可能会工作，也可能不会像你希望的那样工作，这取决于上下文。|4327409|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I had a similar problem trying to make a element editable. It was possible in Chrome and FireFox but in FireFox the caret either went to the beginning of the input or it went one space after the end of the input. Very confusing to the end-user I think, trying to edit the content.

I found no solution trying several things. Only thing that worked for me was to "go around the problem" by putting a plain old text-input INSIDE my . Now it works. Seems like "content-editable" is still bleeding edge tech, which may or may not work as you would like it to work, depending on the context.

blocks|key|1110827|text|将光标移动到可编辑范围的末尾以响应焦点事件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1110828|++moveCursorToEnd(el){
++++if(el.innerText+&&+document.createRange)
++++{
++++++window.setTimeout(()+=>
++++++++{
++++++++++let+selection+=+document.getSelection();
++++++++++let+range+=+document.createRange();

++++++++++range.setStart(el.childNodes[0],el.innerText.length);
++++++++++range.collapse(true);
++++++++++selection.removeAllRanges();
++++++++++selection.addRange(range);
++++++++}
++++++,1);
++++}
++}|code-block|syntax|javascript|1110829|并在事件处理程序中调用它(此处为React)：|1110830|onFocus={(e)+=>+this.moveCursorToEnd(e.target)}}+|1110831|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|$]]

Moving cursor to the end of editable span in response to focus event:

<pre><code> moveCursorToEnd(el){
 if(el.innerText &amp;&amp; document.createRange)
 {
 window.setTimeout(() =&gt;
 {
 let selection = document.getSelection();
 let range = document.createRange();

 range.setStart(el.childNodes[0],el.innerText.length);
 range.collapse(true);
 selection.removeAllRanges();
 selection.addRange(range);
 }
 ,1);
 }
 }
</code></pre>

And calling it in event handler (React here):

<pre><code>onFocus={(e) =&gt; this.moveCursorToEnd(e.target)}} 
</code></pre>

blocks|key|1110847|text|如果你不关心较旧的浏览器，这个浏览器为我做了这个把戏。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1110848|//+[optional]+make+sure+focus+is+on+the+element
yourContentEditableElement.focus();
//+select+all+the+content+in+the+element
document.execCommand('selectAll',+false,+null);
//+collapse+selection+to+the+end
document.getSelection().collapseToEnd();|code-block|syntax|javascript|1110849|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|$]]

If you don't care about older browsers, this one did the trick for me.

<pre><code>// [optional] make sure focus is on the element
yourContentEditableElement.focus();
// select all the content in the element
document.execCommand('selectAll', false, null);
// collapse selection to the end
document.getSelection().collapseToEnd();
</code></pre>

blocks|key|4327442|text|最初开始键入时，contenteditable+<div>和的问题就会得到解决。一种解决方法是在div元素和函数上触发一个焦点事件，清除并重新填充div元素中已经存在的内容。这样问题就解决了，最后您可以使用range和selection将光标放在末尾。对我很管用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4327443|++moveCursorToEnd(e+:+any)+{
++++let+placeholderText+=+e.target.innerText;
++++e.target.innerText+=+'';
++++e.target.innerText+=+placeholderText;

++++if(e.target.innerText+&&+document.createRange)
++++{
++++++let+range+=+document.createRange();
++++++let+selection+=+window.getSelection();
++++++range.selectNodeContents(e.target);
++++++range.setStart(e.target.firstChild,e.target.innerText.length);
++++++range.setEnd(e.target.firstChild,e.target.innerText.length);
++++++selection.removeAllRanges();
++++++selection.addRange(range);
++++}
++}|code-block|syntax|javascript|4327444|在HTML代码中：|4327445|<div+contentEditable="true"+(focus)="moveCursorToEnd($event)"></div>|4327446|entityMap^0|8|F|O|5|U|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

The problem with <code>contenteditable</code> <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code> is resolved when you start typing in it initially. One workaround for this could be triggering a focus event on your div element and on that function, clear, and refill what was already in the div element. This way the problem is resolved and finally you can place the cursor at the end using range and selection. Worked for me.
<pre><code> moveCursorToEnd(e : any) {
 let placeholderText = e.target.innerText;
 e.target.innerText = '';
 e.target.innerText = placeholderText;

 if(e.target.innerText &amp;&amp; document.createRange)
 {
 let range = document.createRange();
 let selection = window.getSelection();
 range.selectNodeContents(e.target);
 range.setStart(e.target.firstChild,e.target.innerText.length);
 range.setEnd(e.target.firstChild,e.target.innerText.length);
 selection.removeAllRanges();
 selection.addRange(range);
 }
 }
</code></pre>
In HTML code:
<pre><code>&lt;div contentEditable=&quot;true&quot; (focus)=&quot;moveCursorToEnd($event)&quot;&gt;&lt;/div&gt;
</code></pre>

blocks|key|1418037|text|仅使用selection+(不含range)的更短且可读的版本：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1418038|​|1418039|function+setEndOfContenteditable(elem)+{
++++let+sel+=+window.getSelection()
++++sel.selectAllChildren(elem)
++++sel.collapseToEnd()
}|code-block|syntax|javascript|1418040|<p+id="pdemo"+contenteditable>
A+paragraph+<span+id="txt1"+style="background-color:+#0903">span+text+node+span+italic+a+paragraph.


<button+onclick="pdemo.focus();+setEndOfContenteditable(txt1)">set+caret</button>|1418041|1418042|非常有用：https://javascript.info/selection-range|1418043|entityMap|0|LINK|mutability|MUTABLE|url|https://javascript.info/selection-range^0|3|9|G|5|0|0|0|0|0|5|13|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|R|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

A shorter and readable version using only <code>selection</code> (without <code>range</code>):
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function setEndOfContenteditable(elem) {
 let sel = window.getSelection()
 sel.selectAllChildren(elem)
 sel.collapseToEnd()
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="pdemo" contenteditable&gt;
A paragraph &lt;span id="txt1" style="background-color: #0903"&gt;span text node &lt;i&gt;span italic&lt;/i&gt;&lt;/span&gt; a paragraph.
&lt;p&gt;

&lt;button onclick="pdemo.focus(); setEndOfContenteditable(txt1)"&gt;set caret&lt;/button&gt;</code></pre>
</div>
</div>

Quite useful: <a href="https://javascript.info/selection-range" rel="nofollow noreferrer">https://javascript.info/selection-range</a>

I need to move caret to end of <code>contenteditable</code> node like on Gmail notes widget.

I read threads on StackOverflow, but those solutions are based on using inputs and they doesn't work with <code>contenteditable</code> elements.

How to move cursor to end of contenteditable entity

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要将插入符号移动到contenteditable节点的末尾，就像在Gmail notes小部件上一样。我在StackOverflow上读到了线程，但这些解决方案都是基于使用输入的，它们不能与contenteditable元素一起工作。

问如何将光标移动到可内容编辑实体的末尾
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将光标移动到可内容编辑实体的末尾EN