javascript - 在可编辑 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/

编辑

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

但是这个解决方案是 Not Acceptable ，因为当我在 div 中检索文本时，我有一些额外的空格。

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

Answer 1

这看起来像是 Chrome 中的错误。您可以通过将多个跨度一起包装到 <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>