如何确保div末尾始终为<br />？IE11 contentEditable光标错位问题

我之前做富文本编辑功能时也踩过这个一模一样的坑！当contentEditable的div最后一个节点不是<br>时，浏览器默认的回车处理逻辑确实会搞乱光标位置——核心原因是浏览器会根据当前DOM结构自动调整回车后的节点生成规则，和我们预期的「换行+光标定位新行」完全不匹配。

下面是我亲测有效的解决方案，通过手动拦截回车事件、控制DOM结构和光标位置来实现预期效果：

// 获取你的contentEditable div元素
const editableDiv = document.getElementById('your-editable-div');

editableDiv.addEventListener('keydown', function(e) {
  // 只处理回车键
  if (e.key !== 'Enter') return;

  // 阻止浏览器默认的回车行为（避免自动插入<p>或<div>破坏原有结构）
  e.preventDefault();

  // 获取当前光标选区
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);

  // 检查div最后一个子节点是否为<br>，如果不是则先补一个
  const lastChild = this.lastChild;
  if (lastChild && lastChild.nodeName !== 'BR') {
    const br = document.createElement('br');
    this.appendChild(br);
  }

  // 插入新的换行标签
  const newBr = document.createElement('br');
  this.appendChild(newBr);

  // 将光标定位到新插入的<br>标签后面，确保光标在新行开头
  range.setStartAfter(newBr);
  range.setEndAfter(newBr);
  selection.removeAllRanges();
  selection.addRange(range);
});

代码说明： #

1. 阻止默认行为：避免浏览器自动生成<p>或<div>标签，严格保持你需要的<span>+<br>结构；
2. 补全末尾换行：确保div最后始终有一个<br>，消除浏览器因DOM结构不一致导致的光标异常；
3. 手动插入换行+定位光标：插入新的<br>后，通过选区对象精准设置光标位置，保证光标稳定出现在新行的正确位置。

如果你的场景里有更复杂的节点嵌套（比如多层嵌套的span），可能需要额外判断光标所在的具体位置，但针对你描述的问题，这个方案应该完全够用啦！

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