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