javascript - 在可编辑 div 内的两个不可编辑跨度之间使用向右箭头移动光标
问题描述
<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 内的文本时,我有一些额外的空格。
解决方案
它看起来像 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>
推荐阅读
- javascript - 更改元素的 outerHTML 会将其从数组中移除
- node.js - 如何用 Jest 模拟`fs.promises.writeFile`
- reactjs - 有没有办法将函数传递给“useState()”的 React Hooks 提供的“更新程序”函数?
- python - pytorch 窄不适用
- python - mysql.connector 不给出 Python 中的最后一个数据库状态
- javascript - 将嵌套数据表添加到 Tabulator 表中的 Tabulator 单元格
- node.js - pdf-lib 文本字段被 fontkit 格式化错误
- javascript - 我的导航栏菜单拒绝触发 onClick 有什么问题
- excel - VBA Excel 无法使用控件库
- c - 检查两个单词是否是C中的字谜