尝试将插入符号（跨浏览器）放在焦点的行尾

Question

考虑以下contenteditable元素

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

DEMO

现在，这里发生的好处是无论你采取什么样的浏览器，如果你点击里面的某个地方，插入符号总是放在x之后。

但是，因为我不希望行末尾的x并删除x插入符号所在位置的行为不同（safari和Edge会做出奇怪的事情） 。所以，我认为当contenteditable的最后一行以span结尾并且不可编辑时，您会遇到问题，所以我做了

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

实际上根本没有帮助，同样的行为。似乎插入符号不会显示在空的范围内

有任何建议如何解决这个问题？

Answer 1

所以你是说插入符号是在跨度内，还是它是一个单独的元素？您可以创建CSS Pseudo Element以将插入符号放置在您希望的位置。只需使用：

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

这是一个更新的DEMO