Cursor is getting stuck on image in content editable div

Question

Please check below fiddle

<div contenteditable="true">
<span class="edit-label">
    Edit me
    <div class="alias-edit-div">
    </div>
</span>
<span>
    Other text1
</span>
<span>
    Other text2
</span>

Mouse over "Edit me" Text and keep your mouse on "edit me" text
Move cursor from left arrow key you will experience a Jittery effect, cursor is getting stuck when edit icon image is visible on "edit me" text

I want a solution so that user can frequently move cursor using left/right arrow key on the editable div element

A div inside a span is invalid HTML. Also, contenteditable element and its cursor is a native environment-depending feature, you can't fork it. Notice, that the cursor stops at every span when moving forward, it's not just the one with the image. — Teemu

Sandwell Sandwell · Accepted Answer · 2018-04-05T09:09:30

You can add :

[contenteditable="true"]:active .alias-edit-div,
[contenteditable="true"]:focus .alias-edit-div{
  display:none !important;
}

to hide de pencil when the user is editing. So the .alias-edit-div will not block the cursor.

Moreover on an UX level it is better to not have the pencil icon displayed when the user is editing the content.

PS : you should consider not using div inside span because it is not html5 valid.

Cursor is getting stuck on image in content editable div

1 Answers