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

Answer 1

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.