iOS Safari中contenteditable添加标签后光标跳至末尾问题排查

我之前踩过iOS Safari在contenteditable元素里处理光标和非编辑节点的坑，结合你的代码和场景，给你几个针对性的解决方案：

一、优化光标定位逻辑（核心修复） #

iOS Safari对contenteditable=false节点的选区计算和桌面端差异很大，原来的selectNode方法容易导致选区偏移。你可以修改insertTextAtCursor里的选区设置部分，换成更兼容的方式：

insertTextAtCursor = (text, paste = false) => {
  const sel = window.getSelection();
  this.compose.focus(); // 确保聚焦到编辑区

  if (sel.getRangeAt && sel.rangeCount) {
    const range = sel.getRangeAt(0);
    range.deleteContents();

    // 插入节点前先设置为inline，避免inline-block导致光标过大
    text.style.display = 'inline';
    if (paste) {
      const textNode = document.createTextNode(text);
      range.insertNode(textNode);
      range.selectNode(textNode);
    } else {
      range.insertNode(text);
    }

    // 清理残留空节点，避免干扰选区
    const emptyNodes = this.compose.querySelectorAll('br:empty, span:empty');
    emptyNodes.forEach(node => node.remove());

    // 重新设置光标到插入节点的后方
    const newRange = document.createRange();
    const nextSibling = text.nextSibling;
    if (nextSibling) {
      newRange.setStartBefore(nextSibling);
      newRange.setEndBefore(nextSibling);
    } else {
      newRange.setStartAfter(text);
      newRange.setEndAfter(text);
    }

    // iOS需要延迟触发选区更新，确保浏览器正确识别
    setTimeout(() => {
      sel.removeAllRanges();
      sel.addRange(newRange);
      this.compose.focus();
    }, 0);
  }
}

二、重构标签结构，避免块级元素干扰 #

你当前的标签里嵌套了div块级元素，这会打乱iOS Safari对contenteditable选区的计算逻辑。把内部的div换成span，用inline-flex实现布局，既保持inline特性，又能避免光标过大：

修改后的HTML： #

<div id="variable-message-input-message-fb39fc57-7909-47e2-9de8-042e70eee3ad" 
     class="variable-message__compose" 
     contenteditable="true" 
     name="message" 
     placeholder="">
  <span spellcheck="false" contenteditable="false" id="span-First Name" class="variable-message__variable">
    <i>{</i>
    <span>First</span>
    <b>_</b>
    <span>Name</span>
    <i>}</i>
    <span class="variable-message__close"></span>
  </span>
</div>

配套CSS调整： #

.variable-message__compose {
  background-color: #fcfcfc;
  border: 1px solid #e3e3e3;
  border-top-left-radius: .2rem;
  border-top-right-radius: .2rem;
  color: #404040;
  min-height: 4rem;
  padding: 1rem 1.2rem;
}

.variable-message__variable {
  display: inline-flex;
  align-items: center;
  gap: 2px; /* 可选：调整内部元素间距 */
  /* 保留你原来的其他样式，比如背景、边框等 */
}

.variable-message__variable span {
  white-space: nowrap; /* 防止文本换行 */
}

三、监听删除事件，手动修正选区 #

iOS Safari在删除contenteditable=false节点时，经常会把光标强制跳到末尾。可以监听删除键事件，手动处理删除后的光标位置：

// 给编辑区绑定keydown事件
this.compose.addEventListener('keydown', (e) => {
  if (e.key === 'Backspace' || e.keyCode === 8) {
    const sel = window.getSelection();
    if (!sel.rangeCount) return;

    const range = sel.getRangeAt(0);
    const variableNode = range.commonAncestorContainer.closest('.variable-message__variable');
    
    if (variableNode && variableNode.contentEditable === 'false') {
      e.preventDefault(); // 阻止默认删除行为
      const prevNode = variableNode.previousSibling;
      variableNode.remove();

      // 设置光标到删除位置的前方
      const newRange = document.createRange();
      if (prevNode) {
        newRange.setStartAfter(prevNode);
        newRange.setEndAfter(prevNode);
      } else {
        newRange.setStart(this.compose, 0);
        newRange.setEnd(this.compose, 0);
      }

      sel.removeAllRanges();
      sel.addRange(newRange);
    }
  }
});

这三个方案结合起来，应该能解决你遇到的光标跳转和光标过大问题。优先尝试前两个方案，第三个作为补充修复边缘场景。

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