当使用css after时，嵌套内容可编辑结构中的chrome中没有出现光标

Cursor not appearing in chrome in nested contenteditable structure when css after is used

本文关键字：chrome 结构 光标 编辑 after css 嵌套      更新时间：2023-09-26

我正在开发一个HTML，它将值为true的contenteditable封装在具有内容可编辑false的div中。HTML结构为：

<div contenteditable=false>
    <div contenteditable=true>
        <p>Abc</p>
        <p>Def</p>
    </div>
</div>

JSFiddle链接：http://jsfiddle.net/mpsingh2003/gxbqujdw/1/

复制步骤：在Chrome 中打开

  1. 在"Def"行中的@后单击
  2. 现在点击@后面的文字"Abc"。光标未出现
  3. 如果现在我点击文本"Abc"中@的左边，光标就会出现。现在单击@的右侧，光标显示为@左侧所需的位置

在Firefox和Edge中，它可以根据需要工作，当在任何一行中单击@的右侧时，光标总是出现在左侧。如果有人能建议任何html或Css解决方案，那就太好了，否则javascript或jquery也会起作用。

请更新Css以修复此问题。

您可以在p:after.中使用Display属性。

请检查此演示

将:after设置为position:absolute似乎可以解决问题（在Chrome中测试）：

p:after {
content:"@";
position:absolute;
cursor:text;
z-index: -1;
}

小提琴

相关文章：