插入符号位置在contenteditable div
问题描述:
Chrome(也可能是其他浏览器)将插入符以一种奇怪的方式放置在contenteditable div中。插入符号位置在contenteditable div
请考虑下面的代码片段:
<div contenteditable="true" style="width: 100%; height: 200px; border: 1px solid black; overflow: auto;">
<p>
<span contenteditable="false" style="width: 75%; height: 80px; display: inline-block; border: 1px solid red;"> </span>.
</p>
</div>
在此JSFiddle也可用。
如果您点击红色范围旁边的时间段的右侧并按退格键删除时间段,插入符突然移动到段落的最右侧。我希望插入符号位于过去的时间位置,旁边是红色的跨度。
为什么它没有按我期望的方式定位,并且有没有一种方法可以获得我正在寻找的行为?
答
这个奇怪的行为是因为p
标签发生的,原因可能是宽度之间有些冲突,你可以编辑标签的css而不是使用display:block
(默认),使用display:inline
。
我创造了这个小提琴:JsFiddle,与display:inline
,是最接近我可以从display:block
得到。
我试过align
属性,但我没有成功。
答
我相当有信心,这是造成它的跨度,因为当你删除它,甚至display: none
它,问题就消失了。我对自己非常好奇,并做了一些搜索,这个人似乎和你有同样的问题。
Why Is My Contenteditable Cursor Jumping to the End in Chrome?
答
非打破空间是正是他们听起来像 - 在那里不会发生断行空格。你不应该用它们在单词,句子或元素之间添加空格。尤其不是元素。
删除& nbsp; (有空间或实际上会占用空间:D),一切都很好。