光标在内容可编辑div中卡在图像上

Question

请查看以下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>

• 鼠标悬停＆＃34;编辑我＆＃34;发短信并保持鼠标开启＆＃34;编辑我＆＃34;文字
• 从左箭头键移动光标，您将体验到抖动效果，当编辑图标图像在＆＃34上可见时，光标会卡住;编辑我＆＃34;文本

我想要一个解决方案，以便用户可以使用可编辑div元素上的左/右箭头键频繁移动光标

Answer 1

您可以添加：

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

在用户编辑时隐藏de pencil。 所以.alias-edit-div不会阻止光标。

此外，在用户体验级别，最好不要在用户编辑内容时显示铅笔图标。

PS：您应该考虑不在div内使用span，因为它不是html5有效。