How to get caret position within contenteditable div with html child elements in Internet Explorer

See more:

ASP.NET

Javascript

Internet

, +

I am working with a contenteditable div that will have the option to have inline html elements such as tags "<p > <font>" in the text flow.

At certain points I need to grab the caret position, the caret is after an html child element.

i am using following code for FF but not find any solution for Internet Explorer

 function  getCaretPosition() {
if (window.getSelection && window.getSelection().getRangeAt) {
                var range = window.getSelection().getRangeAt(0);
                var selectedObj = window.getSelection();
                var rangeCount = 0;
                var childNodes = selectedObj.anchorNode.parentNode.childNodes;
                for (var i = 0; i < childNodes.length; i++) {
                    if (childNodes[i] == selectedObj.anchorNode) {
                        break;
                    }
                    if (childNodes[i].outerHTML)
                        rangeCount += childNodes[i].outerHTML.length;
                    else if (childNodes[i].nodeType == 3) {
                        rangeCount += childNodes[i].textContent.length;                       
                    }
                }
                return range.startOffset + rangeCount;
            }
return -1;
}

i found that document.selection; works on InternetExpolrer but i don't think it will work for me

can any one have any work around for me.

in below example my cursor position is at between 't' and 'w' in <p>two</p>

<div contenteditable="true"><p>one<br><p>t|wo</p></p></div>

i suppose to need number 14 in above example as i need to perform some operation at that point i am using this contenteditable div as RichTextbox with my custom style apply to it