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

Question

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

• 清单项目1
  • 清单项目2
    • 清单项目3

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

为了以图形方式显示，

intial caret pos:

• 清单项目2
  • | | 第3项

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

• 列表项| 2米
  • 清单项目3

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

之后 引用 一个 号码 的 相关 SO 问题 ，我设法中途去放弃之前解决问题。

任何人都知道一个优雅的解决方案？

Answer 1

我建议的一般方法是：

• 当按下向上或向下箭头时，拦截keydown事件并阻止浏览器默认
• 以下是一些函数，可让您获取和设置插入号的位置，作为相对于特定元素的字符索引。 它们并不完美，但是在大多数情况下都能胜任： 在contenteditable div中替换innerHTML （ 此jsFiddle可以做到这一点，但消除了对Rangy库的依赖）。 使用这些获取相对于一个<li>的插入符号字符索引，并将插入符号相对于上方或下方的<li>设置在相同位置。