Firefox中如何在可编辑容器的两个不可编辑元素间定位光标

问题现象 #

在Chrome浏览器中，contenteditable容器内的两个相邻contenteditable="false"元素之间可以正常放置光标并输入内容；但在Firefox中，无法将光标定位到这两个元素之间，也就无法在该位置输入。

重现代码 #

CSS #

div {
  display: flex;
  gap: 10px;
  outline: auto;
  width: 200px;
  height: 20px;
  padding:10px;
}

span {
  height: 20px;
  width: 40px;
  border: solid blue 1px;
}

HTML #

<div contentEditable>
  <span contenteditable="false"></span>
  <span contenteditable="false"></span>
</div>

原因分析 #

Firefox对contenteditable容器的处理逻辑与Chrome不同：当容器内存在相邻的非可编辑元素时，Firefox不会自动在它们之间生成可编辑的文本节点，导致没有可供光标定位的区域；而Chrome会自动处理这种场景，创建隐形的文本节点支持光标放置。

解决方案 #

可以通过以下几种方法实现Firefox的兼容：

方法1：插入零宽度空格（推荐） #

在两个contenteditable="false"元素之间插入零宽度空格（​），它是不可见的空白字符，但会作为可编辑的文本节点存在，让Firefox可以定位光标：

<div contentEditable>
  <span contenteditable="false"></span>&#8203;
  <span contenteditable="false"></span>
</div>

方法2：插入空的可编辑元素 #

在两个不可编辑元素之间添加一个空的、可编辑的span，通过CSS调整为不影响布局的样式：

<div contentEditable>
  <span contenteditable="false"></span>
  <span contenteditable="true" style="width:0; height:0; padding:0; border:none;"></span>
  <span contenteditable="false"></span>
</div>

方法3：JavaScript动态添加文本节点 #

如果需要动态生成元素，可以用JavaScript在两个不可编辑元素之间插入空文本节点：

const div = document.querySelector('div[contentEditable]');
const spans = div.querySelectorAll('span[contenteditable="false"]');
if (spans.length >= 2) {
  div.insertBefore(document.createTextNode(''), spans[1]);
}

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