Wie kann ich den Caret zwischen zufriedenen Listenelementen (mit unterschiedlichen Einrückungen) verschieben, während der Caret-X-Offset beibehalten wird?

Question

Ich habe eine Liste von Elementen mit unterschiedlichen Einzüge wie folgt:

• Liste Artikel 1
  • Liste Artikel 2
    • Liste Artikel 3

Ich schalteein, wenn der Benutzer auf ein Listenelement klickt. Nun, wenn der Benutzer die up Pfeiltaste drückt, möchte ich den Caret/Word-Cursor von sagen List item 3 zu List item 2, während die Caret x Position beibehalten.

diese grafisch anzuzeigen,

intial caret pos:

• Liste Artikel 2
  • Li | st Artikel 3

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

• Liste ite | m 2
  • Liste Artikel 3

Ziel ist es, das Verhalten eines mehrzeiligen Textbereich zu simulieren, wo zwischen den Zeilen mit den Pfeiltasten bewegen bewahrt die Offset caret. Sie können dieses Verhalten auch beim Wechseln zwischen Listenelementen in Google Aufgaben sehen.

AfterreferencinganumberofrelatedSOquestions schaffte ich es, bevor er aufgibt zur Lösung des Problems auf halbem Weg zu bekommen.

Wer kennt eine elegante Lösung?

Answer 1

Der allgemeine Ansatz, den ich vorschlagen würde, ist:

• Intercept das keydown Ereignis und die Standard-Browser verhindern, wenn nach oben oder unten Pfeile
• Hier gedrückt werden, sind einige Funktionen, die es Ihnen ermöglichen, zu erhalten und stellen die Position des Caret als Zeichenindizes relativ zu einem bestimmten Element. Sie sind unvollkommen, würden aber in den meisten Fällen die Aufgabe erfüllen: replace innerHTML in contenteditable div (auch this jsFiddle macht dasselbe, aber entfernt die Abhängigkeit von der Rangy-Bibliothek).Verwenden Sie diese, um den Caret-Zeichenindex relativ zu einem <li> zu erhalten und setzen Sie den Cursor auf die gleiche Position relativ zu <li> über oder unter.