javascript - 在内容可编辑的末尾设置光标

Question

我有一个简单的可编辑内容，其中包含带有标签的文本......当插入标签时，单词被替换为其中的跨度......

<div contenteditable=true>
      text text text <span class="tag">tag</span> 
</div>

这是结果(当用户按下空格时，标签被替换为包含标签文本的跨度；这发生在 keyup 上)

然后我需要将光标放在可编辑内容的末尾(跨度之外)，以便让用户继续输入......

我已经能够在最后移动光标，但只能在跨度内......

我用范围广的。

Answer 1

这可能有效

function moveCursorAtTheEnd(){
    var selection=document.getSelection();
    var range=document.createRange();
    var contenteditable=document.querySelector('div[contenteditable="true"]');

    if(contenteditable.lastChild.nodeType==3){
      range.setStart(contenteditable.lastChild,contenteditable.lastChild.length);
    }else{
      range.setStart(contenteditable,contenteditable.childNodes.length);
    }
    selection.removeAllRanges();
    selection.addRange(range);

  }