Chrome使用箭头键移动光标时跳过contenteditable父元素的空段落

Chrome浏览器处理contenteditable区域时，默认会跳过空块级元素（比如空<p>标签），因为它判定这类元素没有可编辑的内容节点。再加上你通过event.preventDefault()阻止了input事件的默认行为，干扰了浏览器原本的光标定位逻辑，导致跳过空段落的表现更明显。

• 给空段落添加占位内容
  给空<p>标签插入零宽空格（‌ 或 ​），让浏览器识别段落有内容，光标就能正常停留。注意用户删除段落内容时，要自动补回这个零宽空格，避免段落再次变空被跳过。示例代码：

  // 监听段落内容，空时补零宽空格
  function checkEmptyParagraph(paragraph) {
    if (!paragraph.textContent.trim()) {
      paragraph.innerHTML = '​';
    }
  }
  

• 自定义光标移动逻辑
  监听上下箭头按键事件，手动控制光标在所有段落间切换：

  document.querySelector('.contenteditable-parent').addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
      const selection = window.getSelection();
      const currentPara = selection.anchorNode?.closest('p');
      if (!currentPara) return;
  
      const targetPara = e.key === 'ArrowUp' 
        ? currentPara.previousElementSibling 
        : currentPara.nextElementSibling;
  
      if (targetPara) {
        // 定位光标到目标段落起始位置
        const range = document.createRange();
        range.selectNodeContents(targetPara);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
        e.preventDefault();
      }
    }
  });
  

• 配合CSS优化视觉表现
  给空段落设置最小高度，让它在视觉上和非空段落一致：

  p:empty {
    min-height: 1.2em;
  }
  

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