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

Posted

技术标签:

【中文标题】如何将光标移动到内容可编辑实体的末尾【英文标题】:How to move cursor to end of contenteditable entity 【发布时间】:2020-02-18 04:14:00 【问题描述】:

我需要将插入符号移动到 contenteditable 节点的末尾,就像在 Gmail 笔记小部件上一样。

我在 *** 上阅读了线程,但这些解决方案基于使用输入,并且不适用于 contenteditable 元素。

【问题讨论】:

【参考方案1】:

Geowa4 的解决方案适用于 textarea,但不适用于 contenteditable 元素。

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

【讨论】:

geowa4 的解决方案适用于 chrome 中的 textarea,它不适用于任何浏览器中的 contenteditable 元素。我的适用于 contenteditable 元素,但不适用于 textareas。 这是这个问题的正确答案,完美,谢谢 Nico。 Nico 的 selectNodeContents 部分在 Chrome 和 FF 中都给了我错误(没有测试其他浏览器),直到我发现我显然需要将 .get(0) 添加到我的元素中正在喂函数。我想这与我使用 jQuery 而不是裸 JS 有关吗?我从@jwarzech 在question 4233265 学到了这一点。谢谢大家! 是的,该函数需要一个 DOM 元素,而不是 jQuery 对象。 .get(0) 检索 jQuery 内部存储的 dom 元素。您还可以附加[0],在此上下文中相当于.get(0) @Nico Burns:我试过你的方法,但在 FireFox 上不起作用。【参考方案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();

【讨论】:

这是在 chrome 扩展的后台脚本中唯一对我有用的东西 这很好用。在 chrome 71.0.3578.98 和 android 5.1 上的 WebView 上测试。 document.execCommand 现在已过时 developer.mozilla.org/en-US/docs/Web/API/Document/execCommand 。 2020,这仍然适用于 chrome 版本 83.0.4103.116(官方构建)(64 位) 又好又简单,我喜欢。【参考方案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://***.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://***.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);

这样,光标肯定会定位在最后一个元素的末尾,最终嵌套。

EDIT #1:为了更通用,while 语句还应考虑所有其他不能包含文本的标签。这些元素被命名为 void 元素,在this question 中有一些方法可以测试元素是否为 void。因此,假设存在一个名为 canContainText 的函数,如果参数不是 void 元素,则返回 true,以下代码行:

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

应替换为:

canContainText(getLastChildElement(contentEditableElement))

EDIT #2:上面的代码已经完全更新,每个更改都描述和讨论了

【讨论】:

有趣,我原以为浏览器会自动处理这种情况(我并不惊讶它没有,浏览器似乎从来没有用 contenteditable 做直观的事情)。您是否有一个 HTML 示例,您的解决方案适用,但我的解决方案没有? 在我的代码中还有另一个错误。我修好了它。现在,您可以验证我的代码在this page 中有效,而您的无效 我在使用您的函数时遇到错误,控制台显示 Uncaught TypeError: Cannot read property 'nodeType' of null,这是来自被调用的 getLastChildElement 函数。你知道是什么导致了这个问题吗? @VitoGentile 这是一个有点旧的答案,但我想注意你的解决方案只处理块元素,如果里面有内联元素,那么光标将定位在该内联元素之后(像 span, em ...),一个简单的解决方法是将内联元素视为 void 标签并将它们添加到 voidNodeTags 以便它们将被跳过。【参考方案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; 

【讨论】:

使用上面的代码可以解决问题 - 但我希望能够将光标移动到内容可编辑 div 中的任何位置并从该点继续输入 - 例如用户已经识别出例如错字...我将如何将您上面的代码修改为这个? @Zabs 这很简单:不要每次都调用setCaretToEnd() - 仅在需要时调用它:例如在复制粘贴之后,或者在限制消息长度之后。 这对我有用。用户选择标签后,我将光标在 contenteditable div 中移动到末尾。 不错的解决方案,不是像 99% 的 SO 答案那样来自石器时代,也没有被弃用【参考方案5】:

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

  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) 

【讨论】:

【参考方案6】:

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

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

【讨论】:

【参考方案7】:

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>

【讨论】:

【参考方案8】:

仅使用selection(不使用range)的更短且可读的版本:

function setEndOfContenteditable(elem) 
    let sel = window.getSelection()
    sel.selectAllChildren(elem)
    sel.collapseToEnd()
<p id="pdemo" contenteditable>
A paragraph <span id="txt1" style="background-color: #0903">span text node <i>span italic</i></span> a paragraph.
<p>

<button onclick="pdemo.focus(); setEndOfContenteditable(txt1)">set caret</button>

很有用:https://javascript.info/selection-range

【讨论】:

以上是关于如何将光标移动到内容可编辑实体的末尾的主要内容,如果未能解决你的问题,请参考以下文章

Linux命令: 编辑模式移动光标

Linux如何快速跳转到文档开头或者末尾

有没有办法在编辑时将 TextField 的光标移动到文本的末尾?- SwiftUI

ContentEditable div - 更新内部 html 后设置光标位置

在 Vim/Vi 中,如何将光标移动到前一个单词的末尾?

UITextview 光标移动到行尾