Chrome浏览器中contenteditable元素设置光标到文本节点开头失效问题

问题原因 #

Chrome的contenteditable选区实现存在浏览器兼容性差异：当Range的边界刚好处于元素节点（如上例中的<i>标签）和后续文本节点的交界处时，Chrome会默认将光标吸附到前一个元素节点的末尾，无视你指定的文本节点偏移量，而Firefox的实现完全符合W3C Range规范，因此可以正常运行。

解决方案 #

推荐两种适配Chrome的实现方案：

方案1：零宽空格强制边界识别（兼容性最优） #

通过在目标文本节点前插入一个不可见的零宽空格字符（\u200B），强制Chrome识别两个节点的边界，定位完成后可在用户首次输入时自动清理该字符，不会影响实际内容：

<p id="p" contenteditable="true">Example: <i>italic</i> and <b>bold</b></p>

const p = document.getElementById('p');
const targetTextNode = p.childNodes[2];
// 插入零宽空格作为边界锚点
const zwsp = document.createTextNode('\u200B');
p.insertBefore(zwsp, targetTextNode);

const range = new Range();
range.setStartAfter(zwsp);
range.collapse(true);

const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
p.focus();

// 首次输入后自动清理零宽空格
p.addEventListener('input', () => {
  if (zwsp.isConnected) zwsp.remove();
}, { once: true });

方案2：选区校验修正（无额外插入节点） #

设置选区后主动校验当前光标位置是否符合预期，若出现偏移则调用Selection的modify方法微调光标位置：

const p = document.getElementById('p');
const targetTextNode = p.childNodes[2];
const targetOffset = 0;

const range = new Range();
range.setStart(targetTextNode, targetOffset);
range.setEnd(targetTextNode, targetOffset);

const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

// 校验光标位置，偏移则修正
if (sel.anchorNode !== targetTextNode || sel.anchorOffset !== targetOffset) {
  sel.modify('move', 'forward', 'character');
}
p.focus();

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