4 
<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/

4

2 回答 2

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>

于 2018-07-25T08:13:54.537 回答
0

刚刚在两个跨度之间添加了一个换行符，它似乎有效

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>

于 2018-07-24T10:51:35.473 回答