I am looking for solution and scratching my head from 3 days to get the solution for this, but not able to achieve it,

Suppose I have contenteditable p like this

<p contenteditable="true">Hello There <span >Google</span></p>

Now what i want is, when user navigates the caret inside this p tag, it should treat whole span as a single character, i.e

1. When caret is at end of "Google" text, and user presses left arrow key, caret should at start of "Google" and vice versa

2. When caret is at end of "Google" text, and user enters any text it should not come inside span tag, the text's parent should be p tag and vice versa

I found the similar question here

In a contenteditable element, move the cursor between HTML tags

But didn't find the answer.

I also tried to do this by get and set caret position, but failed,

Any suggestions would highly appreciated.

CodePudding user response：

Providing contenteditable="false" to nested span tag, would make span again non-editable, and carat will simply count this as a single word and move to following charaters. I hope this is what you are looking for.

<p contenteditable="true">Hello There <span contenteditable="false" >Google</span>, this part is again editable.</p>