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

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