插入符号位置在 contenteditable div 中很远答案

【问题标题】：Caret position is way off in contenteditable div插入符号位置在 contenteditable div 中很远
【发布时间】：2017-06-17 04:35:04
【问题描述】：

Chrome（可能还有其他浏览器）在内容可编辑的 div 中以一种奇怪的方式放置插入符号。

请考虑以下 sn-p：

<div contenteditable="true" style="width: 100%; height: 200px; border: 1px solid black; overflow: auto;">
    <p>
        <span contenteditable="false" style="width: 75%; height: 80px; display: inline-block; border: 1px solid red;">&nbsp;</span>.
    </p>
</div>

也可在此JSFiddle 中找到。

如果单击红色跨度旁边的句点右侧并按退格键删除句点，插入符号会突然移动到段落的最右侧。我希望插入符号位于红色跨度旁边的时期过去的位置。

为什么它没有按照我期望的方式定位，有没有办法获得我正在寻找的行为？

【问题讨论】：

标签： javascript html css contenteditable

【解决方案1】：

这种奇怪的行为是因为p标签而发生的，原因可能是宽度之间的一些冲突，您可以编辑标签的css，而不是使用display:block（默认），使用display:inline。

我创建了这个小提琴：JsFiddle 和 display:inline 是我可以从 display:block 获得的最接近的。

我尝试了align 属性，但没有成功。

【讨论】：

【解决方案2】：

我相当有信心这是导致它的跨度，因为一旦您删除它甚至display: none 它，问题就会消失。我自己也很好奇，搜了一下，这个人好像和你有同样的问题。

Why Is My Contenteditable Cursor Jumping to the End in Chrome?

【讨论】：

【解决方案3】：

不间断空格就是它们听起来的样子——不会出现换行符的空格。您不应使用它们在单词、句子或元素之间添加空格。尤其是元素。

删除（有空间或实际上会腾出空间：D），一切都很好。

【讨论】：