CODEWITHSUNDEEP
javascriptcontenteditablecursor-position
BryanP
BryanP

Reputation: 710

Backspace while in ContentEditable DIV in front of first character exits containing element

I have an encapsulating span tag around some text which is all inside a content editable div.

Hello <font id="ud_First Name">Bryan</font>

The problem occurs when a user places the cursor directly to the right of the first letter inside this span tag and hits backspace to delete it, then types another character in its place.

Hello B<font id="ud_First Name">ryan</font>

While it properly deletes it and visually appears to add the new character in the right place, inspection of the source in chrome reveals that it is actually placing the new character OUTSIDE of the span which wreaks havoc on our user edits tracking.

I tried many different things but cannot get it to keep the cursor inside the span tag in this case under any circumstances.

Interestingly, HIGHLIGHTING the first character and then typing in place (replacement) keeps the cursor inside the span tag and it works as you'd expect.

Any ideas how to get the desired behavior (hopefully) simply?

Upvotes: 3

Views: 756

Answers (1)

Marc Nicole
Marc Nicole

Reputation: 389

I have the same problem (at least in chrome). interestingly enough, the same pattern inside a or a doesn't give the same problem.

my HTML is 

<div ... contentEditable=true>
   <h1>my title <span class="EMBEDDED">embedded content</span> end of title</h1>
</div>

the problem is that the user (in some cases) is not able to put the cursor before the e of "embedded content"

I don't have a proper fix now but in order to make sure the user at least sees the problem I used in css a 

.EMBEDDED {
  background-color: #ffb848;
  display:none;
}
.EMBEDDED:before {
  content:"{{"
}

.EMBEDDED:after {
  content:"}}"
}

if I find a better solution I will come back

Upvotes: 1

Related Questions