Chrome中contenteditable删除光标右侧空span时出现新增重复节点问题

该问题属于Chromium内核的已知bug，是浏览器对contenteditable区域内的空inline非可编辑节点识别异常导致，以下是经过验证的可行绕过方案：

• 方案1：为空非可编辑span填充零宽字符（最无侵入）
  给所有空的contenteditable="false" span内部插入零宽空格\u200B，既不会改变原有视觉样式，也不会产生额外间距，从根源避免Chrome识别空节点的异常。
  示例代码：

  <span contenteditable="false" data-name="something">​</span>
  

  也可以通过JS在编辑器初始化时批量处理所有空的非可编辑节点：

  document.querySelectorAll('[contenteditable="false"]:empty').forEach(el => {
    el.textContent = '\u200B'
  })
  

• 方案2：修改非可编辑节点的display属性
  给所有contenteditable="false"的节点设置display: inline-block（或其他非inline的display值），即可规避Chrome对inline空节点的处理bug，只要该样式调整不影响原有业务布局即可使用，是成本最低的方案。
  示例CSS：

  [contenteditable="false"] {
    display: inline-block;
    /* 保留原有其他样式规则 */
  }
  

• 方案3：监听键盘事件主动拦截异常行为
  如果前两种方案不符合业务需求，可以给contenteditable容器绑定keydown事件，主动接管Delete键和方向键的操作逻辑，避免触发浏览器默认的异常行为：

  1. 按下Delete键时，先判断光标右侧是否为contenteditable="false"的节点，如果是则主动移除该节点，调用preventDefault阻止浏览器默认处理
  2. 按下左右方向键时，判断光标是否卡在空非可编辑节点位置，主动调整光标位置跳过节点
     示例核心代码：

  const editor = document.querySelector('.basic-editor')
  editor.addEventListener('keydown', e => {
    // 处理Delete键异常
    if (e.key === 'Delete') {
      const sel = window.getSelection()
      if (!sel.rangeCount) return
      const range = sel.getRangeAt(0)
      const nextNode = range.endContainer.nextSibling
      if (nextNode?.nodeType === 1 && nextNode.getAttribute('contenteditable') === 'false' && nextNode.children.length === 0) {
        nextNode.remove()
        e.preventDefault()
      }
    }
    // 方向键光标跳转逻辑可根据业务场景自行补充
  })
  

内容的提问来源于stack exchange，提问作者cmatthews.dickson