Question

I have a div editablecontent, which has the following code

<span id="id1">Hello </span>
<span id="id2">there </span>
<span id="id3">how </span>
<span id="id4">are </span>
<span id="id5">you? </span>

Now the thing is when cursor is inside one of these spans and I press enter, I want it to be

<span id="id1">Hel[enter pressed here]</span>
<span id="xx">lo </span>
<span id="id2">there </span>
<span id="id3">how </span>
<span id="id4">are </span>
<span id="id5">you? </span>

so it detects if you’re in a span an splits the span into a new one?

Answer 1

you can use window.getSelection

tyr this
http://jsfiddle.net/XRW4E/2/

Compleate Solution :
http://jsfiddle.net/XRW4E/5/