用右箭头在可编辑div内的两个不可编辑的跨度之间移动光标

Question

<div contenteditable="true">
Lorem ipsum dolor sit amet,
<span contenteditable="false" class="locked monad startTag">span</span> 
<span contenteditable="false">span</span>
consectetur adipiscing elit, sed do eiusmod<span contenteditable="false">span</span> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

我有一个可编辑的容器，里面有各种不可编辑的跨度，当我试图用光标在前两个跨度之间移动时，向右箭头会消失，向左箭头会起作用。这是一个我只在Chrome浏览器中发现的问题，Safari可以正常工作。我尝试在keyDown事件上使用window.getSelection((对象来确定光标是否在跨度之前并移动它，但没有办法。

有人找到解决方案了吗？

https://jsfiddle.net/riccio82/5qf0jhak/6/

编辑

我找到了一个解决方案，在文本末尾的跨度内添加一个空格，在每个跨度后添加另一个空格。

但这种解决方案是不可接受的，因为当我检索div中的文本时，我有一些额外的空间。

https://jsfiddle.net/riccio82/5qf0jhak/26/

Answer 1

它看起来像Chrome中的一个bug。您可以通过将多个跨段组合到<span contenteditable="false">中，在代码中实现变通方法。

检查下面的示例代码：

span {
color: #767676;
font-style: italic;
background-color: #f8e635;
border-radius: 7px;
padding: 3px;
}

<div contenteditable="true">
Lorem ipsum dolor sit amet,
<span contenteditable="false">
<span contenteditable="false" class="locked monad startTag">span</span> 
<span contenteditable="false">span</span>
</span>
consectetur adipiscing elit, sed do eiusmod<span contenteditable="false">span</span> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Answer 2

刚刚在两个跨度之间添加了一个换行符，它似乎可以工作

span {
color: #767676;
font-style: italic;
background-color: #f8e635;
border-radius: 7px;
padding: 3px;
}

<div contenteditable="true">
Lorem ipsum dolor sit amet,
<span contenteditable="false" class="locked monad startTag">span</span> <!--here -->
<span contenteditable="false">span</span>consectetur adipiscing elit, sed do eiusmod<span contenteditable="false">span</span> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>