How to get the index of the caret position element in a contenteditable div

Asked Nov 26 '16 at 12:24

Active Dec 07 '16 at 14:58

Viewed 157 times

Lets say I have a contenteditable div which also has some element in it

<div id="text" contenteditable="true"><b>abc</b><nav>def</nav><span>ghi</span></div>

Now if the cursor or caret position is within the span element, how do I get the index of the span element as a child node to its parent element div. So I can have this result

divNode = document.querySelector('div');
spanIndex = //get the index of span element which will be = 2
caretEle = divNode.childNodes[spanIndex];

NOTE: I am not looking for the caret position, I want to get the child index of the caret position element to its parent element. ie I want to get the child index of the <span> element to the <div id="text" contenteditable="true">

For example:

node = document.getElementById('text');
node.childNodes[0] == <b>
node.childNodes[1] == <nav>
node.childNodes[2] == <span>

edited Dec 07 '16 at 14:58

asked Nov 26 '16 at 12:24

doggie brezy

You may look here: http://stackoverflow.com/questions/34091730/get-and-set-cursor-position-with-contenteditable-div ------ – n4m31ess_c0d3r Nov 26 '16 at 12:50
Its not possibly a duplicate. I have tried that solution yet not good. – doggie brezy Nov 26 '16 at 13:02
How is it *not good?* – zer00ne Nov 26 '16 at 15:08
Is this one *good*? http://stackoverflow.com/q/40747657/2813224 or how about this one is it *good* http://stackoverflow.com/q/40747657/2813224 ? You can't modify what you already have? – zer00ne Nov 26 '16 at 15:16

How to get the index of the caret position element in a contenteditable div

0 Answers0