How to get Character Offset from div

Question

I have a div with "contenteditable = true".
For ex:
<div id="editableDiv" contenteditable="true">
<br/>fggggdf
</div>
How to get the character offset(for example character 'd' offset) with respect to the div "editableDiv".

Thanks in advance

Answer 1

I bet this answer will help you.

I was thinking of a similar approach to the one presented here. Basically, you will have to do something like this:

It basically copies the whole text from inside the textarea into a div of the same size. I have set some CSS to ensure that in every browser, the textarea and the div wrap their content in exactly the same way.

Answer 2

Check this out. You can find the offset where mouse is clicked to show your suggestion box.

http://jsfiddle.net/8dZBT/2/

$('#editableDiv').click(function(e){
    var x = e.pageX;
    var y = e.pageY;
    x -= $(this).offset().left;
    y -= $(this).offset().top;
    alert(x+' '+y)

});