如何修复contenteditable属性下的光标移动异常问题？

问题背景 #

我们有一个带contenteditable="true"属性的聊天输入区域，需要展示包含图片和隐藏文本的模块，当前实现存在光标移动bug。由于运行在浏览器扩展中，无法修改外部站点的contenteditable属性。

复现步骤 #

• 点击输入区域行尾，多次按左箭头键，光标可正常穿过图片移动到左侧文本处
• 从文本或图片左侧按右箭头键尝试移至行尾时，光标到达第一个图片后就消失，无法继续向右移动

尝试过的临时修复：在图片间添加任意符号可解决，但这是聊天输入框，需要支持用户在任意位置输入，不能额外添加可见符号。用CSS伪元素添加可见文本的方案也无效。

现有代码 #

CSS代码 #

.editor {
    display: inline-block;
    width: 200px;
}

.hide {
  display: none;
}

HTML代码 #

<div class="editor" contenteditable="true">text <span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span><span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span><span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span></div>

尝试过的无效CSS方案 #

span[contenteditable=false]:after {
    content: "space";
}

解决方案 #

问题根源在于连续的contenteditable="false"块之间没有可识别的文本节点，导致浏览器光标导航逻辑无法定位后续移动位置。以下两种方案可修复：

方案1：插入零宽空格（HTML修改） #

在每个非可编辑span后添加零宽空格（​），它不会显示但能让浏览器识别光标移动节点：

<div class="editor" contenteditable="true">text <span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span>&#8203;<span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span>&#8203;<span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span></div>

方案2：CSS伪元素添加零宽空格 #

如果无法直接修改HTML，用CSS伪元素插入零宽空格（Unicode编码\200B）：

span[contenteditable=false]:after {
    content: "\200B";
    display: inline;
}

该方案不会影响输入框视觉效果，也不干扰用户输入。

原理说明 #

浏览器处理contenteditable区域光标导航时，需要在可编辑内容与非可编辑块之间存在文本节点（哪怕是零宽的），才能正确处理左右箭头的移动逻辑。连续的非可编辑块会被视为整体，导致光标无法逐个穿过。

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