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中的错误。您可以通过将多个跨度合并到<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>

用右箭头在可编辑div内两个不可编辑范围之间移动光标

2 个答案: