Javascript 如何在保持插入符号x偏移的同时，在内容可编辑列表项（具有不同缩进）之间移动插入符号？

我有一个不同缩进的项目列表，如下所示：

清单项目1 清单项目2 清单项目3 当用户单击列表项时，我打开contentEditable。现在，当用户按下向上箭头键时，我想将插入符号/单词光标从列表项3移动到列表项2，同时保持插入符号的x位置

要以图形方式显示这一点

初始插入符号位置：

清单项目2 第3项 用户按下向上箭头后的最终插入符号位置。尽管缩进级别不同，x偏移量保持不变：

列表i|m 2 清单项目3 其目的是模拟多行文本区域的行为，其中使用箭头键在行之间移动会保留插入符号偏移。在Google任务中的列表项之间移动时，也可以看到这种行为

，在我放弃之前，我设法把问题解决了一半

---

有人知道一个优雅的解决方案吗？

我建议的一般方法是：

截取keydown事件，并在按下向上或向下箭头时阻止浏览器默认设置 下面是一些函数，允许您获取和设置插入符号的位置，作为相对于特定元素的字符索引。它们并不完美，但在大多数情况下都可以完成这项工作：它们也可以完成同样的工作，但消除了对Rangy库的依赖。使用这些选项可以获取相对于一的插入符号字符索引，并将插入符号设置为相对于上方或下方的相同位置。