如何在br标签与不可编辑元素间定位光标？

针对你遇到的contenteditable容器内换行后无法将光标定位到不可编辑元素前的问题，这里提供一套无需零宽空格的HTML+CSS+JavaScript方案，直接通过事件监听和光标范围控制解决：

完整代码实现 #

HTML结构 #

<div id="editable" contenteditable="true" style="padding: 8px;">
  hello world
  <br>
  <div class="non-editable" contenteditable="false" style="display: inline-block;">hello world</div>
</div>

CSS样式 #

.non-editable {
  position: relative;
}

/* 给不可编辑元素前后添加透明可点击区域，解决点击定位问题 */
.non-editable::before,
.non-editable::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0;
}

.non-editable::before {
  left: -4px;
}

.non-editable::after {
  right: -4px;
}

JavaScript逻辑 #

const editable = document.getElementById('editable');
const nonEditable = document.querySelector('.non-editable');

// 点击不可编辑元素左侧区域时，定位光标到元素前
editable.addEventListener('click', (e) => {
  const rect = nonEditable.getBoundingClientRect();
  if (e.clientX <= rect.left && e.clientX >= rect.left - 4 && e.clientY >= rect.top && e.clientY <= rect.bottom) {
    setCursorBeforeNonEditable();
    e.preventDefault();
  }
});

// 按左箭头试图从不可编辑元素内移出时，定位光标到元素前
editable.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;
    const range = selection.getRangeAt(0);
    
    if (range.startContainer === nonEditable && range.startOffset === 0) {
      setCursorBeforeNonEditable();
      e.preventDefault();
    }
  }
});

// 核心函数：设置光标到不可编辑元素的前置位置
function setCursorBeforeNonEditable() {
  const selection = window.getSelection();
  const range = document.createRange();
  let targetNode = nonEditable.previousSibling;

  if (targetNode && targetNode.nodeName === 'BR') {
    // 前置是换行标签时，光标定位到换行后
    range.setStartAfter(targetNode);
  } else if (targetNode && targetNode.nodeType === Node.TEXT_NODE) {
    // 前置是文本节点时，光标定位到文本末尾
    range.setStart(targetNode, targetNode.length);
  } else {
    // 其他情况直接定位到不可编辑元素前
    range.setStartBefore(nonEditable);
  }

  range.collapse(true);
  selection.removeAllRanges();
  selection.addRange(range);
}

方案说明 #

1. CSS部分：通过伪元素给不可编辑元素左侧添加4px的透明点击区域，让用户能点击到元素前的空白位置，触发光标定位逻辑。
2. 点击事件处理：判断点击位置是否落在左侧辅助区域，是的话手动创建光标范围并定位到正确位置。
3. 键盘事件处理：监听左箭头按键，当光标试图从不可编辑元素内部向左移动时，强制将光标定位到元素前方。
4. 光标定位函数：针对不同的前置节点（换行、文本、空节点）做适配，确保光标始终能准确落在换行和不可编辑元素之间。

这个方案不需要额外插入零宽空格，避免了多余按键操作和删除元素时的残留问题，同时兼容主流浏览器的contenteditable行为。

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