CODEWITHSUNDEEP
javascripthtmlcontenteditablecaret
Sarah2333
Sarah2333

Reputation: 21

Caret jumps to the right edge of the contenteditable element when deleting the last character next to the pill

I have a pill and text inside a contenteditable element(div). However, after deleting the last character next to the pill, the caret jumps to the right edge of the contenteditable element. How to avoid the caret jumping(off-set)?

HTML:

<div class='container' contenteditable="true">
  <div class='pill' contenteditable="false" >Andy Green</div>Text B
</div>

CSS

.container {
  border: 1px solid black;
}
.pill {
  background-color: #b2ffb2;
  border-radius: 25px;
  display: inline;
  padding: 0 5px;
}

JSFiddle: https://jsfiddle.net/3sn4emj0/10/

Upvotes: 1

Views: 337

Answers (1)

Sarah2333
Sarah2333

Reputation: 21

I solved my problem by luck. Just add an empty following the pill!

<div class='container' contenteditable="true">
 <div class='pill' contenteditable="false" >Andy Green</div><span></span>Text B
<span></span>
</div>

Please see the JsFiddle for details. https://jsfiddle.net/3sn4emj0/12/

Upvotes: 1

Related Questions