Ändern Sie die Cursorposition im contenteditable div nach dem Ändern von innerHTML

Question

Ich habe eine einfache contenteditable div mit etwas Text drin. On onkeyup Ereignis Ich möchte den gesamten Inhalt (innerHTML) des div basierend auf Regex ersetzen.

Zum Beispiel

HTML:

some text, more text and $even more text 

Funktion, in der ich plane, den gesamten Text mit $ ($ sogar in Beispiel oben) und es in Span-Tag wickeln zu erhalten:

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

Das Problem ist nach solchen Ersatz-Cursor springt an den Anfang des div. Ich möchte, dass es dort bleibt, wo es vorher war.

Ich stelle mir vor, ich muss die Koordinaten des Cursors vor der Änderung speichern und dann irgendwie setzen sie den Cursor zurück, aber wie kann ich es tun? :)

Ich habe versucht, Bereich Objekt speichern, aber nach der Bearbeitung glaube ich, dass es nirgends hinweist.

Danke!

Answer 1

Das Problem ist, dass Sie die gesamte innerHTML aktualisieren, aber nur ein kleiner Teil davon ändert sich. Sie können keinen regulären Ausdruck und keinen Massenersatz verwenden. Sie müssen das div scannen und nach Übereinstimmungen suchen, daraus Textbereiche erstellen und den Inhalt mit der span umbrechen. Siehe http://www.quirksmode.org/dom/range_intro.html, Programmgesteuertes Erstellen eines Bereichs.

Allerdings denke ich, das wird nicht funktionieren, wenn der Cursor im Text ist, der ersetzt werden soll, es ist aber ein Anfang.

Answer 2

Sie wissen, welchen Text Sie ersetzen. Sie kennen also die Position dieses Textes. Dort wirst du nur den neuen Text schreiben. Dann ist auch die Position gleich. Nach dem Schreiben von neuem HTML, können Sie den Cursor setzen.

für zB

I undertsand nicht die Frage

Position Frage ist 5 ein i ersetzen

ich undertsand nicht die Antwort

die Cursorposition

bis 5 machen

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

Answer 3

Ich nahm diese aus einem anderen Forum. Es hat mein Problem gelöst.

Ok, ich es geschafft, um es an die Arbeit, hier ist die Lösung, wenn jemand interessiert:

Speichern Sie die Auswahl x, y:

Code:

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

die Auswahl Restore:

Code:

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

Sie können es sehen, hier zu arbeiten:

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