Thay đổi vị trí con trỏ trong div có thể chỉnh sửa được sau khi thay đổi innerHTML

Question

Tôi có một div có thể chỉnh sửa nội dung đơn giản với một số văn bản trong đó. Trên sự kiện onkeyup tôi muốn thay thế toàn bộ nội dung (innerHTML) của div dựa trên regex.

Ví dụ,

HTML:

some text, more text and $even more text 

Chức năng, trong đó tôi có kế hoạch để có được tất cả các văn bản với $ ($ ngay cả trong ví dụ trên) và bọc nó trong thẻ div:

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

Vấn đề là sau khi con trỏ thay thế đó nhảy vào đầu div. Tôi muốn nó ở lại nơi trước đây.

Tôi tưởng tượng tôi phải lưu tọa độ của con trỏ trước khi thay đổi và sau đó bằng cách nào đó bằng cách sử dụng chúng đặt con trỏ trở lại nhưng làm cách nào tôi có thể làm điều đó? :)

Tôi đã thử lưu đối tượng phạm vi nhưng sau khi chỉnh sửa tôi tin rằng nó trỏ đến hư không.

Cảm ơn!

Answer 1

Vấn đề là bạn đang cập nhật toàn bộ innerHTML, nhưng chỉ một phần nhỏ của nó đang thay đổi. Bạn không thể sử dụng cụm từ thông dụng và o thay thế hàng loạt. Bạn cần phải quét div và tìm kiếm các kết quả phù hợp, tạo các dải văn bản ra khỏi chúng và bọc nội dung với khoảng. Xem http://www.quirksmode.org/dom/range_intro.html, Tạo lập dải ô theo lập trình.

Tuy nhiên, tôi nghĩ rằng điều này sẽ không hoạt động nếu con trỏ nằm trong văn bản cần thay thế, đó là sự khởi đầu.

Answer 2

Bạn biết bạn đang thay thế văn bản nào. Vì vậy, bạn biết vị trí của văn bản đó. chỉ có bạn sẽ đặt văn bản mới. Sau đó, cũng là vị trí là same.After viết html mới, yu có thể thiết lập con trỏ.

cho ví dụ

Tôi không undertsand câu hỏi

vị trí của câu hỏi là 5 một i thay thế nó

Tôi không undertsand câu trả lời

làm cho vị trí con trỏ đến 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

Answer 3

tôi lấy từ diễn đàn khác. Nó giải quyết vấn đề của tôi.

Ok, tôi quản lý để làm việc xung quanh nó, đây là giải pháp nếu có ai quan tâm:

Store lựa chọn x, y:

Code:

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

Khôi phục lựa chọn:

Mã:

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

Bạn có thể nhìn thấy nó làm việc ở đây:

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