contenteditable div中按Enter需两次才插入<br>？求排查解决

嘿，作为刚接触Selection/Range的新手，你遇到的这个“按两次Enter才生效”的问题其实是个非常典型的小坑——核心原因是插入
后没有正确更新选区状态，导致浏览器的内部光标位置和实际DOM不一致，第一次操作后看起来没生效，第二次才同步过来。

问题分析 #

当行内有文本时，你虽然用event.preventDefault()阻止了默认的div拆分行为，但如果没有手动调整并更新选区：

• 原Range可能仍停留在文本节点内部的某个位置
• 插入
  后光标没有被正确移到新行
• 浏览器的选区状态和实际DOM脱节，需要第二次Enter来“校准”

而空行时没问题，是因为空节点下的Range初始位置本来就在节点末尾，插入行为刚好符合预期。

修正后的代码方案 #

下面是调整后的完整实现，关键是插入
后要手动把光标移到新行，并更新选区：

function keyExamine(e) {
  // 只处理Enter键
  if (e.key !== 'Enter') return;
  
  e.preventDefault();
  
  // 获取当前选区，无选区则直接返回
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  
  const currentRange = selection.getRangeAt(0);
  const brElement = document.createElement('br');

  // 先清除选中的内容（如果用户选中了文本按Enter）
  currentRange.deleteContents();

  // 插入<br>到当前Range位置
  currentRange.insertNode(brElement);

  // 把光标移到<br>的后面，确保下一次输入在新行
  currentRange.setStartAfter(brElement);
  currentRange.setEndAfter(brElement);

  // 更新选区，让浏览器识别新的光标位置
  selection.removeAllRanges();
  selection.addRange(currentRange);
}

关键细节说明 #

1. 清除选中内容：如果用户选中了一段文本后按Enter，先删除选中内容再插入
   ，符合常规编辑器的行为
2. 重置Range位置：插入
   后必须手动把Range的起始和结束都移到
   后面，否则光标会停留在
   前面或者原文本位置
3. 更新选区：通过removeAllRanges和addRange强制浏览器同步选区状态，这是解决“两次Enter”问题的核心

这个方案在Chrome、Firefox等主流浏览器的contenteditable元素上都能稳定工作，你可以直接替换原代码测试～

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