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

Ho un div semplice contenteditable con del testo in esso. In caso di evento onkeyup voglio sostituire l'intero contenuto (innerHTML) del div in base alla regex.Modifica la posizione del cursore nel div contenteditable dopo aver cambiato innerHTML

Per esempio,

HTML:

some text, more text and $even more text

funzione in cui ho intenzione di ottenere tutto il testo con $ ($ anche nell'esempio sopra) e avvolgerlo in tag span:

div.onkeypress = function() { 
    div.innerHTML.replace(/(some_regexp)/, "<span class='class'>$1</span>"); 
};

Il problema è dopo che il cursore di sostituzione è saltato all'inizio del div. Voglio che rimanga dov'era prima.

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

Ho provato a salvare l'oggetto intervallo ma dopo l'editing credo non punti da nessuna parte.

Grazie!

fonte

2010-09-24 Ilya Tsuryev

Che cosa significa il codice HTML di sostituzione simile? –

Ho aggiornato la domanda originale. se sai come ottenere il comportamento previsto con altri mezzi senza modificare l'intero HHML interno, sarebbe bello sentirlo. –

So che è una vecchia domanda, ma sei riuscito a trovare una soluzione per questo? Ho lo stesso identico bisogno –

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

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

fonte

2010-09-28 16:57:39

Ho provato il tuo suggerimento ma anche se ho usato il range, la posizione del cursore ritorna all'inizio del div. – carmina

@carmina Difficile dire se non mostri il tuo codice. Tuttavia, se hai una domanda, ti preghiamo di richiederla come una nuova domanda (con il codice che hai usato), in modo che possa essere indirizzata correttamente –

per favore vedi: http://stackoverflow.com/questions/20262798/using-insertnode-to -add-a-span-in-a-contenteditable-div-changes-the-cursor-posit – carmina

Si sa quale testo si sta 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 esempio

I dont undertsand questione

posizione di domanda è 5 un i sostituirla

poteva undertsand la risposta

rendono la posizione cursore 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

fonte

2010-09-30 18:05:44 zod

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

Ok, sono riuscito a lavorare intorno ad esso, ecco la soluzione, se qualcuno è interessato:

Conservare la selezione x, y:

Codice:

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

ripristinare la selezione:

Codice:

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

Potete vederlo lavorare qui:

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

fonte

2011-01-17 17:07:49 Serena

Mi manca qualcosa? Seguito il link, demo live selezionata. Cliccato nel mezzo della parola, tasto destro, opzione selezionata e cursore saltato alla fine della linea. –

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

risposta

Problemi correlati