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

Question

我需要将插入符号移动到

contenteditable

节点的末尾，就像在 Gmail 笔记小部件上一样。

我在 StackOverflow 上阅读了线程，但这些解决方案基于使用输入，并且不适用于

contenteditable

元素。

Answer 1

Geowa4 的解决方案适用于文本区域，但不适用于可内容编辑的元素。

此解决方案用于将插入符号移动到可内容编辑元素的末尾。它应该适用于所有支持 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);

Answer 2

如果你不关心旧版浏览器，这个就对我有用了。

// [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();

Answer 3

还有一个问题。

如果 contenteditable div 不包含其他多行元素，则

Nico Burns

的解决方案有效。

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

为了解决这些问题，我安排了以下解决方案，这是对Nico解决方案的改进：

//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 elements，在this question中有一些关于如何测试元素是否为void的方法。因此，假设存在一个名为

canContainText

的函数，如果参数不是 void 元素，则返回

true

，以下代码行：

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

应替换为：

canContainText(getLastChildElement(contentEditableElement))

编辑＃2：上面的代码已完全更新，描述和讨论了每个更改

Answer 4

可以通过范围将光标设置到末尾：

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

Answer 5

仅使用

selection

（不使用

range

）的更短且可读的版本：

function setEndOfContenteditable(elem) {
    let sel = window.getSelection();
    sel.selectAllChildren(elem);
    sel.collapseToEnd();
}

<p contenteditable>
A paragraph <span id="txt1" style="background: #cec">span text node <i>span italic</i></span> a paragraph.
<p>

<button onclick="setEndOfContenteditable(txt1)">set caret</button>

非常有用：https://javascript.info/selection-range

Answer 6

将光标移动到可编辑范围的末尾以响应焦点事件：

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

并在事件处理程序中调用它（在此处进行反应）：

onFocus={(e) => this.moveCursorToEnd(e.target)}} 

Answer 7

我知道这个问题已经有了答案，但我认为简单的一句话可能会帮助未来发现这个问题的人：

document.getSelection().modify("move", "forward", "documentboundary");

这将获取当前选定的元素并将光标向前移动（取决于语言 - 向右忽略语言）到文档末尾。

请参阅此处，了解有关如何使用选择的更多信息。

Answer 8

我在尝试使元素可编辑时遇到了类似的问题。在 Chrome 和 FireFox 中这是可能的，但在 FireFox 中，插入符号要么转到输入的开头，要么转到输入结尾后的一个空格。我认为尝试编辑内容对最终用户来说非常混乱。

我尝试了几件事没有找到解决方案。唯一对我有用的就是通过在我的 .现在可以了。似乎“内容可编辑”仍然是前沿技术，它可能会也可能不会按照您希望的方式工作，具体取决于上下文。

Answer 9

当您最初开始输入时，

contenteditable

<div>

和

<span>

的问题就已解决。解决此问题的一种方法是在 div 元素和该函数上触发焦点事件，清除并重新填充 div 元素中已有的内容。这样问题就解决了，最后您可以使用范围和选择将光标置于末尾。为我工作。

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

在 HTML 代码中：

<div contentEditable="true" (focus)="moveCursorToEnd($event)"></div>