我正在开发一个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 中打开
- 在"Def"行中的@后单击
- 现在点击@后面的文字"Abc"。光标未出现
- 如果现在我点击文本"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;
}
小提琴