Modifica la posizione del cursore nel div contenteditable dopo aver cambiato innerHTML

Ho un div semplice contenteditable con del testo in esso. Su evento onkeyup voglio sostituire l’intero contenuto (innerHTML) del div in base alla regex.

Per esempio,

HTML:

some text, more text and $even more text 

Funzione in cui prevedo di ottenere tutto il testo con $ ($ anche nell’esempio sopra) e di includerlo nel tag span:

 div.onkeypress = function() { div.innerHTML.replace(/(some_regexp)/, "$1"); }; 

Il problema è dopo che tale cursore di sostituzione salta all’inizio del div. Voglio che rimanga dov’era prima.

    Immagino di dover salvare le coordinate del cursore prima di cambiare e poi in qualche modo usarle per posizionare il cursore indietro, ma come posso farlo? 🙂

    Ho provato a salvare l’object range ma dopo l’editing credo che punti verso il nulla.

    Grazie!

    Il problema è che stai aggiornando l’intero innerHTML, ma solo una piccola parte sta cambiando. Non è ansible utilizzare un’espressione regolare e una sostituzione bulk. È necessario eseguire la scansione del div e cercare corrispondenze, creare intervalli di testo e avvolgere il contenuto con lo span. Vedi http://www.quirksmode.org/dom/range_intro.html , Creazione di un intervallo a livello di codice.

    Tuttavia, penso che questo non funzionerà se il cursore è nel testo da sostituire, è comunque un inizio.

    Sai quale testo stai sostituendo. Quindi conosci la posizione di quel testo. lì solo tu metti il ​​nuovo testo. Quindi anche la posizione è la stessa. Dopo aver scritto new html, puoi impostare il cursore.

    per es

    Non mi interessa la domanda

    la posizione della domanda è 5 e la sostituisco

    Non mi piace la risposta

    posiziona il cursore su 5

    http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning

    http://hartshorne.ca/2006/01/23/javascript_cursor_position/

    http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx

    L’ho preso da un altro forum. Ha risolto il mio problema.

    Ok, sono riuscito a risolverlo, ecco la soluzione se qualcuno è interessato:

    Memorizza la selezione x, y:

    Codice:

     cursorPos=document.selection.createRange().duplicate(); clickx = cursorPos.getBoundingClientRect().left; clicky = cursorPos.getBoundingClientRect().top; 

    Ripristina la selezione:

    Codice:

     cursorPos = document.body.createTextRange(); cursorPos.moveToPoint(clickx, clicky); cursorPos.select(); 

    Puoi vederlo lavorare qui:

    http://www.tachyon-labs.com/sharpspell/