试图将插入符号（跨浏览器）放在行尾

Question

考虑以下contenteditable元素

<div contenteditable>
    Foo bar <span contenteditable="false"></span>x</div>

演示

现在，这里发生的一件好事是，无论您使用哪种浏览器，如果单击内部的某个位置，插入号始终位于x后面。

但是，因为我不想在行尾加上x ，而又删除了x ，所以插入标记放置位置的行为是不同的（野生动物园和Edge做奇怪的事情）。 因此，我发现当contenteditable的最后一行以不可编辑的span结尾时，您会遇到问题，所以我做了

<div contenteditbale>Foo Bar <span con...="false"><span></span></div>

相同的行为实际上根本没有帮助。 看来插入符号不会显示在空白范围内

任何建议如何解决此问题？

Answer 1

那么，您是说插入符号在跨度内部，还是单独的元素？ 您可以创建一个CSS伪元素 ，将插入符放置在所需的位置。 只需使用：

div::after {
    content: url(caret.png);
}

这是更新的演示