Wie man text-cursor-position nach dem keypress-Ereignis passiert?

Schreibe ich einen syntax-highlighter. Der highlighter sollte aktualisieren Sie die Hervorhebung sofort während der Eingabe von text und navigieren mit den Pfeiltasten.

Das problem, das ich bin vor ist, dass, wenn das 'keypress' - Ereignis ausgelöst wird, erhalten Sie noch die alte position des text-cursor über window.getSelection().

Beispiel:

JS:

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);

HTML:

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

Im Beispiel platzieren Sie die Einfügemarke vor das Wort 'foo', dann drücken Sie die Taste (Pfeil Rechts).

Innerhalb der Konsole Ihre Lieblings-DevTool, sehen Sie das folgende:

keydown 0
keypress 0
keyup 1

Dass 0 neben keypress ist offensichtlich die alte position der Einfügemarke. Wenn Sie bei gedrückter ein bisschen mehr, erhalten 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 zu bekommen, ist die neue position der Einfügemarke gerne würde ich es für 'keyup' oder 'input'. Wenn 'keyup' ausgelöst wird, zu spät (ich möchte hervorheben der syntax, während die Taste gedrückt wird) und 'input' wird nur ausgelöst, wenn tatsächlich gibt es einige-input ( produziert keine Eingabe).

Ist es ein Ereignis, das ausgelöst wird, nachdem der Cursor-position verändert hat, und nicht nur auf input? Oder muss ich zum berechnen der position des text-Cursors, und wenn ja, wie? (Ich nehme an, das kann ganz schön kompliziert, wenn der text umgebrochen werden soll und drücken Sie (der Pfeil nach Unten Taste).)

  • Ich denke, Sie haben ein anderes problem mit dem keypress-Ereignis. Chrome scheint nicht zum auslösen des Ereignisses, wenn Sie eine Pfeiltaste drücken (Firefox funktioniert). Es ist eine alte chromium-bug-status " WontFix beschreiben: bugs.chromium.org/p/chromium/issues/detail?id=2606
  • Vielen Dank für den Hinweis! Richtig, die keypress - Ereignis nicht ausgelöst, aber es ist offensichtlich, als veraltet markiert, sowieso. Als ich sah, wie jetzt, die Spezifikation besagt, dass die Menschen empfohlen, die beforeinput Veranstaltung statt. Und keydown ist auch feuerte ununterbrochen. Obwohl alle diese Ereignisse ausgelöst werden, zu früh. Ich habe mir jetzt eingereicht, ein Problem auf die UI-Events-Spezifikation., in der Hoffnung, um ein ordentliches event für diese.
  • Cursor-Positionen / Auswahl usw. sind immer noch ein pita zu unterstützen, die auf allen Browsern. Es ist schon eine Weile her, dass ich brauchte, das aber feingliedrig ist sehr solide mit den cursor-bezogene Sachen..
Schreibe einen Kommentar