skip to Main Content

There is input field with content editable. Need to display block that contain img and none-displayable span with text. Snippet below did the task. But it has bug. And I can not change contenteditable because it belong external site and my code run in browser extension.

Run snippet. Click end of line, press left arrow button a few times. Your cursor moving through images to text. It’s okay. Now press right arrow button and try to arrived end of line. When cursor get there first image, cursor’s selection disappears. Another words, we can move cursor from right to left, but fail from left to right.

.editor {
    display: inline-block;
    width: 200px;
}

.hide {
  display: none;
}
<div class="editor" contenteditable="true">text <span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span><span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span><span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span></div>

If between images will any symbols, bug fix. But I need not symbols there. Because input field is message sender for chat where user can typing in any place.

I tried add pseudo element, bug still reproduce.

span[contenteditable=false]:after {
    content: "space";
}

2

Answers


  1. your issues is don’t make the span tags contenteditable="false"
    make it true contenteditable="true" so that the cursor issue will be solves

    Login or Signup to reply.
  2. <div class="editor" contenteditable="true">text <span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span><span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span><span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span></div>
    
    The problem is your child spans are inheriting the contenteditable="true" from the parent div.
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search