Edit Question - KnowledgeHub

Title Body

i need to implement highlight for numbers( in future im add more complex rules ) in the contenteditable div. The problem is When im insert new content with javascript replace, DOM changes and contenteditable div lost focus. What i need is keep focus on div with caret on the current position, so users can just type without any issues and my function simple highlighting numbers. Googling around i decide that Rangy library is the best solution. I have following code: function formatText() { var savedSel = rangy.saveSelection(); el = document.getElementById('pad'); el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/ig,""); el.innerHTML = el.innerHTML.replace(/([0-9])/ig,"<font color='red'>$1</font>"); rangy.restoreSelection(savedSel); } <div contenteditable="true" id="pad" onkeyup="formatText();"></div> The problem is after function end work focus is coming back to the div, but caret always point at the div begin and i can type anywhere, execept div begin. Also console.log types following Rangy warning: Module SaveRestore: Marker element has been removed. Cannot restore selection. Please help me to implement this functional. Im open for another solutiona, not only rangy library. Thanks! http://jsfiddle.net/2rTA5/ This is jsfiddle, but it dont work properly(nothing happens when i typed numbers into my div), dunno maybe it me (first time post code via jsfiddle) or resource doesnt support contenteditable. UPD* Im read similar problems on stackoverflow, but solutions doesnt suit to my case :(

Tags (comma-separated) Cancel