删除药丸旁边的最后一个字符时，插入符号会跳到 contenteditable 元素的右边缘

【问题标题】：Caret jumps to the right edge of the contenteditable element when deleting the last character next to the pill删除药丸旁边的最后一个字符时，插入符号会跳到 contenteditable 元素的右边缘
【发布时间】：2017-02-27 19:02:12
【问题描述】：

我在 contenteditable 元素（div）中有一个药丸和文本。但是，在删除药丸旁边的最后一个字符后，插入符号会跳到 contenteditable 元素的右边缘。如何避免插入符号跳转（偏移）？

HTML：

<div class='container' contenteditable="true">
  <div class='pill' contenteditable="false" >Andy Green</div>Text B
</div>

CSS

.container {
  border: 1px solid black;
}
.pill {
  background-color: #b2ffb2;
  border-radius: 25px;
  display: inline;
  padding: 0 5px;
}

JSFiddle： https://jsfiddle.net/3sn4emj0/10/

【问题讨论】：

标签： javascript html contenteditable caret

【解决方案1】：

我很幸运地解决了我的问题。只需在药丸后面加一个空！

<div class='container' contenteditable="true">
 <div class='pill' contenteditable="false" >Andy Green</div><span></span>Text B
<span></span>
</div>

有关详细信息，请参阅 JsFiddle。 https://jsfiddle.net/3sn4emj0/12/

【讨论】：

不幸的是，这不起作用。如果你删除除了药丸之外的文本，然后输入一些文本（即“你好”），然后删除除了药丸之外的文本，你会遇到同样的问题。问题是，当您删除不是药丸的文本然后输入更多文本时，该文本会被放入您添加的空白范围中。然后，当您删除输入的新文本时，跨度被删除，您又回到了原点。因此，您需要始终确保药丸 div 旁边有一个空白跨度。