如何在保持插入記號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>設置在相同位置。