試圖將插入符號（跨瀏覽器）放在行尾

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);
}

這是更新的演示