Come ottenere la posizione del cursore del testo dopo l'evento della pressione di un tasto?

Question

Sto scrivendo un evidenziatore di sintassi. L'evidenziatore dovrebbe aggiornare immediatamente l'evidenziatura durante l'immissione del testo e la navigazione con i tasti freccia.

Il problema che sto affrontando è che quando viene attivato l'evento "keypress", si ottiene comunque la vecchia posizione del cursore di testo tramite window.getSelection().

Esempio:

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>

Nell'esempio, posizionare il cursore prima della parola 'foo', quindi premere → (il tasto freccia destra).

all'interno della console del vostro DevTool preferito vedrete il seguente:

keydown 0 
keypress 0 
keyup 1 

Che 0 oltre keypress è ovviamente la vecchia posizione del cursore. Se si tiene premuto → un po 'più a lungo, si otterrà qualcosa di simile:

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

Quello che voglio ottenere è la nuova posizione del cursore come vorrei farlo per 'KeyUp' o 'input'. Anche se "keyup" viene attivato troppo tardi (voglio evidenziare la sintassi mentre il tasto è premuto) e "input" viene attivato solo quando c'è effettivamente un input (ma → non produce alcun input).

C'è un evento che viene attivato dopo che la posizione del cursore è cambiata e non solo in ingresso? O devo calcolare la posizione del cursore del testo e, in caso affermativo, come? (Suppongo questo può diventare piuttosto complicato quando il testo avvolge e si preme ↓ (il tasto freccia giù).)

Answer 1

È possibile utilizzare setTimeout per elaborare l'evento keydown in modo asincrono:

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>

Questo metodo risolve il problema di elaborazione dei codici. Nel tuo esempio, hai anche un elemento span all'interno del div, che altera il valore della posizione restituito da

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

Answer 2

Ecco una soluzione correggere la posizione utilizzando l'evento 'keydown':

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>

Purtroppo questa soluzione ha come sono diversi difetti:

• Quando all'interno di un elemento figlio come <span> nell'esempio, non fornisce lo startOffset corretto né lo corretto.
• Non può gestire più linee.
• Non gestisce tutte le opzioni di navigazione. Per esempio. saltando in senso letterale tramite Ctrl + →/← non viene riconosciuto.

E ci sono probabilmente più problemi a cui non ho pensato. Mentre sarebbe possibile gestire tutti questi problemi, rende l'implementazione molto complessa. Quindi la semplice soluzione setTimeout(..., 0) fornita da ConnorsFan è decisamente preferibile fino a quando non c'è un event for caret position changes.