退格时在ContentEditable DIV前面的第一个字符退出包含元素

Question

我在一些文本周围有一个封装的span标记，它都在一个内容可编辑的div中。

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

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

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

虽然它正确地删除了它并且在视觉上似乎在正确的位置添加了新角色，但是对chrome中的源的检查显示它实际上放置了对我们的用户编辑跟踪造成严重破坏的跨度的新角色OUTSIDE。 / p>

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

有趣的是，突出显示第一个字符然后键入到位（替换）会将光标保持在span标记内，并且它可以按照您的预期运行。

任何想法如何获得理想的行为（希望如此）？

Answer 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:"}}"
}

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