Попытка поставить каретку (кросс-браузер) в конце линии на фокусе

Question

Рассмотрим следующий contenteditable элемент

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

DEMO

Теперь, хорошая вещь происходит здесь в том, что любой браузер вы берете , каретка всегда помещается после x, если вы щелкнете где-то внутри.

Но, поскольку я не хочу x в конце строки, и вы удаляете, то поведение, в котором находится карет, отличается (сафари и край странные вещи). Таким образом, я понял, что, когда последняя строка contenteditable заканчивается span, который не редактируется у вас будут проблемы, так что я сделал

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

Что на самом деле не помогает вообще, такое же поведение. Кажется, что каретка не будет отображаться внутри пустого промежутка

Любые предложения, как исправить это?

Answer 1

Так вы говорите, что карет идет внутри пролета, или это отдельный элемент? Вы можете создать CSS Pseudo Element, чтобы разместить каретку там, где она вам понравилась. Просто используйте:

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

Вот обновленный DEMO