如何解决内容可编辑属性的光标问题？

Question

有带有

content editable

的输入字段。需要用文本显示包含

img

和不可显示

span

的块。下面的片段完成了任务。但它有错误。我无法更改

contenteditable

，因为它属于外部站点，并且我的代码在浏览器扩展中运行。

运行片段。单击行尾，按左箭头按钮几次。您的光标从图像移动到文本。没关系。现在按右箭头按钮并尝试到达行尾。当光标到达第一个图像时，光标的选择消失。换句话说，我们可以从右到左移动光标，但从左到右则失败。

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

.hide {
  display: none;
}

<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>

如果图像之间有任何符号，错误修复。但我不需要那里的符号。因为输入字段是聊天的消息发送器，用户可以在任何地方输入。

我尝试添加伪元素，错误仍然重现。

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

Answer 1

您的问题是不要使跨度标签 contenteditable="false" 设为 true contenteditable="true" 这样光标问题就解决了