Chrome(和其他浏览器)在可编辑的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 中也提供了相应的内容。
如果你点击红色单词后面的句号的右边,并按下退格键删除该句号,光标会突然移动到段落的极右侧。我本来期望光标将定位在原来句号所在的位置,即紧挨着红色单词后面。
为什么光标没有按照我的期望定位,有没有办法让其按照我想要的行为表现呢?