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

Question

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

At certain points I need to grab the caret position(cursor position) of contenteditable div, the caret(cursor) is after an html child element.

i am using following code in javascript for Firefox it works correctly to find caret position(cursor position) of contenteditable div, but i does not find any solution for Internet Explorer to find caret position (cursor position) as window.getSelection is undefined.

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 Internet Expolrer but i don't think it will work for me to find caret position(cursor position) of contenteditable div.

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><b>t|wo</b></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

Answer 1

Hi i found answer for internet explorer version 8 or below

       var cursorPosition=0;    
       if (document.selection && document.selection.createRange) {
            range = document.selection.createRange();
            if (range.parentElement() == YourEditableControl) {
                var tmpEle = document.createElement("span");
                YourEditableControl.insertBefore(tmpEle, YourEditableControl.firstChild);
                var tmpRange = range.duplicate();
                tmpRange.moveToElementText(tmpEle);
                tmpRange.setEndPoint("EndToEnd", range);
                cursorPosition= tmpRange.text.length;
            }
        }

above code solve my problem to find current cursor position for IE8 or below version as window.getSelection() is undifined for IE8 or below and works fine with IE9

so one can use document.selection a selection object and range object to get current caret or cursor position form contenteditable div or other control

i hope this will help