contenteditable元素按下Tab键后选区未返回插入\t后的位置问题

我明白你遇到的问题了——直接修改innerText后选区跑偏，确实是个常见的坑。咱们直接来修复这个问题，核心是用原生的选区（Selection）和范围（Range）API来精准控制插入和光标位置，而不是粗暴替换文本。

修正后的代码实现 #

function insertTab(event) {
  if (event.which === 9) {
    event.preventDefault();
    const td = event.target;
    const selection = window.getSelection();
    
    // 确保当前选区在目标contenteditable元素内
    if (selection.rangeCount > 0 && selection.anchorNode.parentNode === td) {
      const range = selection.getRangeAt(0);
      
      // 创建制表符文本节点
      const tabNode = document.createTextNode('\t');
      
      // 将制表符插入到当前光标所在的位置
      range.insertNode(tabNode);
      
      // 调整光标到制表符的后方
      range.setStartAfter(tabNode);
      range.collapse(true); // 折叠选区，变成光标状态
      
      // 更新页面上的选区，让光标生效
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }
}

为什么原来的方法失效？ #

之前直接修改innerText的问题在于：当你替换元素内的文本后，浏览器会重新生成元素内部的文本节点，原来保存的选区引用已经完全失效了，自然没法定位到你期望的位置。而用Range API操作时，我们是直接在当前光标位置插入新节点，然后手动把光标移到新节点后方，整个过程完全可控，不会丢失选区上下文。

额外注意事项 #

别忘了给你的contenteditable元素设置white-space样式，否则浏览器会把制表符\t当成普通空格处理，看不到缩进效果：

td[contenteditable] {
  white-space: pre-wrap;
}

内容的提问来源于stack exchange，提问作者A. L