如何将光标移动到可用实体的结尾

我需要将插入符号移动到Gmail备忘录小部件上的contenteditable节点的末尾。

我在StackOverflow上读取线程，但是这些解决scheme是基于使用input，并且它们不能用于contenteditable元素。

Answer 1

还有另一个问题。

尼科伯恩斯的解决scheme工作，如果contenteditable div不包含其他multilined元素。

例如，如果div包含其他div，而这些其他div包含其他内容，可能会出现一些问题。

为了解决这个问题，我安排了下面的解决scheme，这是尼科的一个改进：

 //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+ { 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 || {})); 

用法：

 var editableDiv = document.getElementById("my_contentEditableDiv"); cursorManager.setEndOfContenteditable(editableDiv); 

这样，游标肯定位于最后一个元素的末尾，最终嵌套。

编辑＃1 ：为了更通用，while语句还应该考虑所有其他不能包含文本的标签。 这些元素被命名为void元素 ，在这个问题中有一些方法来testing一个元素是否是无效的。 所以，假设存在一个名为canContainText的函数，如果参数不是void元素，则返回true ，如下代码行：

 contentEditableElement.lastChild.tagName.toLowerCase() != 'br' 

应该换成：

 canContainText(getLastChildElement(contentEditableElement)) 

编辑＃2 ：上面的代码完全更新，每一个变化描述和讨论

Answer 2

Geowa4的解决scheme将适用于textarea，但不适用于contenteditable元素。

这个解决scheme是为了将插入符号移动到可用元素的末尾。 它应该在支持contenteditable的所有浏览器中工作。

 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 } } 

它可以被类似于以下代码使用：

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