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

2019年7月28日 243次阅读 
<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()对象来查明光标是否在span之前并移动它,但是没有办法.

有人找到任何解决方案吗？

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

编辑

我找到了一个解决方案,在文本的末尾添加一个空格,在每个跨度之后添加一个空格.

但是这个解决方案是不可接受的,因为当我在div中检索文本时,我有一些额外的空格.

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

最佳答案 它看起来像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>
点赞