Как я могу перемещать курсор между элементами списка содержимого (с разными отступами), сохраняя смещение курсора по x?

У меня есть список элементов с разными отступами:

  • List item 1
    • List item 2
      • List item 3

Я включаю contentEditable, когда пользователь щелкает элемент списка. Теперь, когда пользователь нажимает клавишу со стрелкой up, я хочу переместить курсор курсора / слова, скажем, с List item 3 на List item 2, сохраняя положение курсора по оси x.

Чтобы показать это графически,

intial caret pos:

  • List item 2
    • Li | st item 3

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

  • List ite | m 2
    • List item 3

Цель состоит в том, чтобы имитировать поведение многострочной текстовой области, в которой при перемещении между строками с помощью клавиш со стрелками сохраняется смещение курсора. Вы также можете увидеть это поведение при перемещении между элементами списка в Задачах Google.

После ссылка номер из related SO вопросы мне удалось пройти половину пути к решению проблемы, прежде чем я сдался.

Кто-нибудь знает об элегантном решении?


javascript contenteditable caret
person vjk2005    schedule 15.04.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Общий подход, который я предлагаю, таков:

  • Перехватить событие keydown и предотвратить использование браузера по умолчанию при нажатии стрелок вверх или вниз
  • Вот несколько функций, которые позволяют вам получать и устанавливать положение каретки как индексы символов относительно определенного элемента. Они несовершенны, но в большинстве случаев справятся со своей задачей: замените innerHTML в contenteditable div (также этот jsFiddle делает то же самое, но удаляет зависимость от библиотеки Rangy). Используйте их, чтобы получить индекс символа каретки относительно одного <li> и установить курсор в то же положение относительно <li> выше или ниже.
person Tim Down    schedule 15.04.2012