如何在内容可编辑列表项(不同缩进)之间移动插入符号，同时保持插入符号 x 偏移量

Question

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

• 列表项 1
  • 列表项 2
    • 列表项 3

当用户单击列表项时，我打开contentEditable。现在，当用户按下up箭头键时，我想将插入符号/单词光标从（例如List item 3）移动到List item 2，同时保持插入符号的 x 位置。

为了以图形方式显示这一点，

intial caret pos:

• 列表项 2
  • 李 | st 项 3

final caret pos after user presses up arrow. x offset remains same despite the difference in indent levels:

• 列表 ite | m 2
  • 列表项 3

目的是模拟多行文本区域的行为，其中使用箭头键在行之间移动可保留插入符号偏移量。在 Google 任务中的列表项之间移动时，您还可以看到此行为。

在参考了一些相关的SO问题后，我设法在放弃之前解决了问题的一半。

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

Answer 1

我建议的一般方法是：

• 拦截keydown事件并防止在按下向上或向下箭头时浏览器默认值
• 下面是一些函数，允许您获取插入符号的位置并将其设置为相对于特定元素的字符索引。它们并不完美，但在大多数情况下都可以完成这项工作：在内容可编辑的div 中替换 innerHTML（这个 jsFiddle 也做了同样的事情，但删除了对 Rangy 库的依赖）。使用它们获取相对于一个<li>的插入符号字符索引，并将插入符号设置为相对于上方或下方<li>的相同位置。