1

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

  • 清单项目 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 Tasks 中的列表项之间移动时，您也可以看到此行为。

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

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

4

1 回答 1

0

我建议的一般方法是：

  • 按下向上或向下箭头时拦截keydown事件并阻止浏览器默认
  • 这里有一些函数允许您获取和设置插入符号的位置作为相对于特定元素的字符索引。它们并不完美，但在大多数情况下都可以完成这项工作：在 contenteditable div 中替换 innerHTML（这个 jsFiddle也有同样的作用，但消除了对 Rangy 库的依赖）。使用这些来获取相对于一的插入符号字符索引<li>，并将插入符号设置为相对于<li>上面或下面的相同位置。
于 2012-04-15T23:55:31.583 回答