Wie bekomme ich die Position des Textcursors nach dem Tastendruck?

Question

Ich schreibe einen Syntax-Highlighter. Der Highlighter sollte die Hervorhebung sofort bei der Texteingabe und Navigation mit den Pfeiltasten aktualisieren.

Das Problem, mit dem ich konfrontiert bin, ist, dass, wenn das 'keypress' Ereignis ausgelöst wird, Sie immer noch die alte Position des Textcursors über window.getSelection() erhalten.

Beispiel:

function handleKeyEvent(evt) { 
 
    console.log(evt.type, window.getSelection().getRangeAt(0).startOffset); 
 
} 
 

 
var div = document.querySelector("div"); 
 
div.addEventListener("keydown", handleKeyEvent); 
 
div.addEventListener("keypress", handleKeyEvent); 
 
div.addEventListener("input", handleKeyEvent); 
 
div.addEventListener("keyup", handleKeyEvent);

<div contenteditable="true">f<span class="highlight">oo</span></div>

Im Beispiel setzen die Einfügemarke vor dem Wort 'foo', dann → (die rechte Pfeiltaste) drücken.

Innerhalb der Konsole Ihres Lieblings DevTool Sie folgenden sehen werden:

keydown 0 
keypress 0 
keyup 1 

Die 0 neben keypress ist offensichtlich die alte Position der Einfügemarke. Wenn Sie ein wenig nach unten → länger halten, werden Sie so etwas wie dieses:

keydown 0 
keypress 0 
keydown 1 
keypress 1 
keydown 1 
keypress 1 
keydown 2 
keypress 2 
keyup 2 

Was ich will bekommen, ist die neue Position der Einfügemarke, wie ich es für ‚keyup‘ bekommen würde oder ‚Input‘. Obwohl "keyup" zu spät ausgelöst wird (ich möchte die Syntax hervorheben, während die Taste gedrückt wird) und "input" nur ausgelöst wird, wenn tatsächlich ein Eingang vorhanden ist (→ erzeugt jedoch keine Eingabe).

Gibt es ein Ereignis, das ausgelöst wird, nachdem sich die Caret-Position geändert hat und nicht nur bei der Eingabe? Oder muss ich die Position des Textcursors berechnen und wenn ja, wie? (Ich nehme an, dies ziemlich kompliziert werden kann, wenn der Text umbrochen und Sie drücken ↓ (die Pfeiltaste nach unten).)

Answer 1

Sie setTimeout verwenden können die keydown Ereignis asynchron zu verarbeiten:

function handleKeyEvent(evt) { 
 
    setTimeout(function() { 
 
     console.log(evt.type, window.getSelection().getRangeAt(0).startOffset); 
 
    }, 0); 
 
} 
 

 
var div = document.querySelector("div"); 
 
div.addEventListener("keydown", handleKeyEvent);

<div contenteditable="true">This is some text</div>

Diese Methode adressiert das Schlüsselverarbeitungsproblem. In Ihrem Beispiel haben Sie auch ein span Element innerhalb der div, die durch den Positionswert zurück ändert

window.getSelection().getRangeAt(0).startOffset 

Answer 2

Hier ist eine Lösung, die die Position Korrektur des 'keyDown' Ereignis mit:

function handleKeyEvent(evt) { 
 
    var caretPos = window.getSelection().getRangeAt(0).startOffset; 
 

 
    if (evt.type === "keydown") { 
 
    switch(evt.key) { 
 
     case "ArrowRight": 
 
     if (caretPos < evt.target.innerText.length - 1) { 
 
      caretPos++; 
 
     } 
 
     break; 
 

 
     case "ArrowLeft": 
 
     if (caretPos > 0) { 
 
      caretPos--; 
 
     } 
 
     break; 
 

 
     case "ArrowUp": 
 
     case "Home": 
 
     caretPos = 0; 
 
     break; 
 

 
     case "ArrowDown": 
 
     case "End": 
 
     caretPos = evt.target.innerText.length; 
 
     break; 
 

 
     default: 
 
     return; 
 
    } 
 
    } 
 
    console.log(caretPos); 
 
} 
 

 
var div = document.querySelector("div"); 
 
div.addEventListener("keydown", handleKeyEvent); 
 
div.addEventListener("input", handleKeyEvent);

<div contenteditable="true">f<span class="highlight">oo</span></div>

Leider ist diese Lösung können wie angeboten hat mehrere Mängel auf:

• Wenn innerhalb eines untergeordneten Elements wie dem <span> in dem Beispiel, gibt es nicht die richtige startOffset noch die richtige startContainer.
• Es kann nicht mehrere Zeilen verarbeiten.
• Es behandelt nicht alle Navigationsoptionen. Z.B. wörtlich springen über Ctrl + →/← wird nicht erkannt.

Und es gibt wahrscheinlich mehr Probleme, an die ich nicht gedacht habe. Obwohl all diese Probleme bewältigt werden könnten, ist die Implementierung sehr komplex. So ist die einfache setTimeout(..., 0) Lösung von ConnorsFan definitiv vorzuziehen, bis es eine event for caret position changes gibt.