修改contenteditable的innerHTML后失焦，如何将光标移至内容末尾？

你提到的通过添加特殊Unicode字符来定位光标位置的方法完全可行，下面是具体实现步骤和代码：

方法一：使用零宽标记字符定位 #

1. 生成HTML内容时，在目标span末尾插入零宽空格（\u200B）——这个字符不可见，不会影响页面排版，但能帮我们精准定位位置。
2. 更新innerHTML后调用focus()获取焦点，再找到标记字符的位置，删除它并将光标定位到该位置。

示例代码：

// 构造带标记的HTML内容
const cursorMarker = '\u200B';
const markedHtml = newModifiedDataWithSpan + cursorMarker;
contenteditable.innerHTML = markedHtml;

// 重新获取焦点
contenteditable.focus();

// 遍历文本节点找到标记所在位置
const treeWalker = document.createTreeWalker(contenteditable, NodeFilter.SHOW_TEXT);
let textNode;
let targetNode = null;
let markerIndex = -1;

while (textNode = treeWalker.nextNode()) {
  const index = textNode.textContent.indexOf(cursorMarker);
  if (index !== -1) {
    targetNode = textNode;
    markerIndex = index;
    break;
  }
}

if (targetNode && markerIndex !== -1) {
  const selection = window.getSelection();
  const range = document.createRange();
  
  // 选中标记字符并删除
  range.setStart(targetNode, markerIndex);
  range.setEnd(targetNode, markerIndex + cursorMarker.length);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('delete');
  
  // 将光标定位到标记原本的位置（即span末尾）
  range.setStart(targetNode, markerIndex);
  range.collapse(true);
  selection.removeAllRanges();
  selection.addRange(range);
}

方法二：直接定位到span元素末尾（更高效） #

如果能直接选中目标span元素，无需额外标记字符，直接通过Range API定位到span内容的末尾即可：

示例代码：

// 更新innerHTML
contenteditable.innerHTML = newModifiedDataWithSpan;
// 获取焦点
contenteditable.focus();

// 找到目标span（根据实际情况调整选择器）
const targetSpan = contenteditable.querySelector('.your-span-class');
if (targetSpan) {
  const selection = window.getSelection();
  const range = document.createRange();
  
  // 选中span的所有内容，然后折叠到末尾
  range.selectNodeContents(targetSpan);
  range.collapse(false);
  
  // 应用光标位置
  selection.removeAllRanges();
  selection.addRange(range);
}

两种方法都能解决焦点丢失、光标回到开头的问题：方法二更高效，适合能直接定位到目标span的场景；方法一适合无法直接选中span的情况。

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