在contenteditable中插入span后，如何将光标定位至span末尾

我在一款聊天应用里使用contenteditable组件，标记用户时会找到当前光标位置插入以下span元素：

<span class="highlight" contenteditable="false">${userName}</span>

但插入这个span后，contenteditable会失去焦点，光标位置也丢失了。我试过两种Stack Overflow上的方案，都解决不了焦点丢失的问题——如果在setCursorPosition函数前调用el.focus()，光标会直接回到contenteditable的开头。

我的代码如下：

getCaretPositionInnerHTML() {
   var target = document.createTextNode("\u0001");
   document.getSelection().getRangeAt(0).insertNode(target);
   var position = this.contenteditable.nativeElement.innerHTML.indexOf("\u0001");
   target.parentNode.removeChild(target);
   return position;
}

saveMention(event, user): void { // 执行后失去焦点
   event.stopPropagation();
   let tempString = this.contenteditable.nativeElement.innerHTML;
   let index = this.getCaretPositionInnerHTML();
   let replacement = this.getSpanFromUserFn(user); // 返回目标span元素
   let currentWordLength = this.getCurrentWord(tempString, index); // 用span替换当前单词
   let newString = tempString.substring(0, index - currentWordLength.length) + replacement + tempString.substring(index + 1);
   this.contenteditable.nativeElement.innerHTML = newString;
}

ngOnChanges(changes: SimpleChanges) {
if (this.caretPosition) {
  console.log(changes);
  this.selection.removeAllRanges();
  let range = this.setCursorPosition(this.element.nativeElement, document.createRange(), {  pos: this.caretPosition, done: false});
  this.element.nativeElement.focus();
  range.collapse(true);
  this.sel.addRange(range);
}

// 查找子节点和相对位置并设置到range上
setCursorPosition(parent, range, stat) {
if (stat.done) return range;
if (parent.childNodes.length == 0) {
if (parent.textContent.length >= stat.pos) {
  range.setStart(parent, stat.pos);
  stat.done = true;
} else {
  stat.pos = stat.pos - parent.textContent.length;
}
} else {
for (var i = 0; i < parent.childNodes.length && !stat.done; i++) {
  this.currentNode = parent.childNodes[i];
  this.setCursorPosition(this.currentNode, range, stat);
}
}
return range;
}

核心问题 #

直接替换innerHTML会完全重绘DOM，导致原有选区和焦点丢失；而且通过innerHTML索引计算光标位置的方式本身就不可靠——HTML标签会干扰字符计数，和实际文本节点的偏移量不匹配。

修复方案 #

1. 改用DOM节点直接操作，放弃innerHTML字符串拼接
   用Range和选区API直接替换目标内容，避免DOM重绘：

   saveMention(event, user): void {
     event.stopPropagation();
     const sel = window.getSelection();
     if (!sel.rangeCount) return;
   
     const range = sel.getRangeAt(0);
     // 获取当前要替换的单词范围（替换原getCurrentWord逻辑，基于Range计算）
     const wordRange = this.getCurrentWordRange(range);
     if (!wordRange) return;
   
     // 创建标记用户的span
     const mentionSpan = document.createElement('span');
     mentionSpan.className = 'highlight';
     mentionSpan.contentEditable = 'false';
     mentionSpan.textContent = user.name;
   
     // 替换单词并插入空文本节点（让光标能停在span后面）
     wordRange.deleteContents();
     wordRange.insertNode(mentionSpan);
     const emptyText = document.createTextNode(' ');
     wordRange.insertNode(emptyText);
   
     // 重置光标到span后方
     range.setStartAfter(mentionSpan);
     range.collapse(true);
     sel.removeAllRanges();
     sel.addRange(range);
   
     // 确保元素保持焦点
     this.contenteditable.nativeElement.focus();
   }
   
   // 辅助函数：基于Range定位当前单词的范围
   getCurrentWordRange(range: Range): Range | null {
     const startNode = range.startContainer;
     if (startNode.nodeType !== Node.TEXT_NODE) return null;
   
     const text = startNode.textContent || '';
     let startOffset = range.startOffset;
     let endOffset = startOffset;
   
     // 向左找到单词起始位置
     while (startOffset > 0 && /\S/.test(text[startOffset - 1])) {
       startOffset--;
     }
     // 向右找到单词结束位置
     while (endOffset < text.length && /\S/.test(text[endOffset])) {
       endOffset++;
     }
   
     const wordRange = document.createRange();
     wordRange.setStart(startNode, startOffset);
     wordRange.setEnd(startNode, endOffset);
     return wordRange;
   }
   

2. 调整焦点与选区的设置顺序
   原代码先设置Range再聚焦的顺序错误，正确顺序是先聚焦元素，再设置选区：

   ngOnChanges(changes: SimpleChanges) {
     if (this.caretPosition) {
       // 先聚焦元素
       this.contenteditable.nativeElement.focus();
       this.selection.removeAllRanges();
       // 再设置光标位置
       let range = this.setCursorPosition(this.contenteditable.nativeElement, document.createRange(), { pos: this.caretPosition, done: false});
       range.collapse(true);
       this.selection.addRange(range);
     }
   }
   

3. 移除不可靠的innerHTML光标计算逻辑
   原getCaretPositionInnerHTML方法依赖innerHTML的字符索引，会因为HTML标签的存在导致位置偏差，直接用Range API操作选区更准确。

注意事项 #

• contenteditable="false"的元素会阻断光标定位，必须在其后方插入空文本节点，让光标能正常停留。
• 所有选区操作必须在元素focus之后执行，否则选区不会生效。
• 避免直接修改innerHTML，减少DOM重绘带来的焦点和选区丢失问题。

内容的提问来源于stack exchange，提问作者Steve Chacko