如何修复contenteditable元素中的光标移动异常问题

问题说明 #

在第三方站点的contenteditable聊天输入框中，插入包含<img>和隐藏<span>的区块后，出现光标移动异常：

• 从行尾按左箭头，能正常穿过图片定位到隐藏文本区域
• 从左向右按右箭头，光标碰到第一张图片后直接消失

试过用伪元素添加内容的方法，无效：

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

修复方案 #

1. 插入零宽空格（最推荐） #

给隐藏<span>或者<img>前后插入零宽空格（​），它不会显示也不影响输入，但能让浏览器正确识别光标停靠点：

<!-- 给隐藏文本加零宽空格 -->
<span contenteditable="false" style="display:none;">隐藏文本&#8203;</span>

<!-- 或者给图片前后加 -->
&#8203;<img src="your-img-url" />&#8203;

2. 添加可编辑空节点 #

把包含图片和隐藏文本的容器设为contenteditable="false"，在容器前后各加一个空的contenteditable="true"节点，给光标提供停靠位置：

<span contenteditable="true"></span>
<div contenteditable="false">
    <img src="your-img-url" />
    <span style="display:none;">隐藏文本</span>
</div>
<span contenteditable="true"></span>

3. CSS强制文本流识别 #

给隐藏元素添加CSS属性，让浏览器正确解析元素的文本流：

span[contenteditable=false] {
    display: none;
    unicode-bidi: embed;
    direction: ltr;
}

注：这个方案兼容性略差，优先用前两种。

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