退格，而在 ContentEditable DIV 前面的第一个字符退出包含元素答案

【问题标题】：Backspace while in ContentEditable DIV in front of first character exits containing element退格，而在 ContentEditable DIV 前面的第一个字符退出包含元素
【发布时间】：2016-06-06 17:12:47
【问题描述】：

我在一些文本周围有一个封装跨度标签，这些文本都在内容可编辑的 div 内。

Hello <font id="ud_First Name">Bryan</font>

当用户将光标直接放在此 span 标签内第一个字母的右侧并按退格键将其删除，然后在其位置键入另一个字符时，就会出现问题。

Hello B<font id="ud_First Name">ryan</font>

虽然它正确地删除了它并且视觉上似乎在正确的位置添加了新字符，但在 chrome 中检查源代码发现它实际上将新字符放置在跨度之外，这对我们的用户编辑跟踪造成了严重破坏。

我尝试了很多不同的方法，但在任何情况下都无法将光标保持在 span 标签内。

有趣的是，突出显示第一个字符，然后在原地输入（替换）将光标保持在 span 标记内，它可以按预期工作。

任何想法如何简单地（希望）获得所需的行为？

【问题讨论】：

标签： javascript contenteditable cursor-position

【解决方案1】：

我有同样的问题（至少在 chrome 中）。有趣的是，a 或 a 中的相同模式不会产生相同的问题。

我的 HTML 是

<div ... contentEditable=true>
   <h1>my title <span class="EMBEDDED">embedded content</span> end of title</h1>
</div>

问题是用户（在某些情况下）无法将光标放在“嵌入内容”的 e 之前

我现在没有适当的修复，但为了确保用户至少看到我在 css a 中使用的问题

.EMBEDDED {
  background-color: #ffb848;
  display:none;
}
.EMBEDDED:before {
  content:"{{"
}

.EMBEDDED:after {
  content:"}}"
}

如果我找到更好的解决方案，我会回来

【讨论】：