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

Question

Consider the following contenteditable element

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

DEMO

Now, the nice thing going on here is that whatever browser you take, the caret is always placed after the x if you click somewhere inside.

But, because I don't want the x at the end of the line and you remove the x the behaviour of where the caret is placed is different (safari and Edge do strange things). So, I figured that when the last line of a contenteditable ends with a span which is not editable you will have problems, so I did

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

Which actually doesn't help at all, same behaviour. It seems that the caret will not show inside an empty span

Any suggestions how to fix this?

Answer 1

So are you saying the caret is going inside the span, or is it a separate element? You could create a CSS Pseudo Element to position the caret where you would like it. Just use:

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

Here's an updated DEMO