如何通过单击将光标放置在使用 user-select:all 的两个节点之间？

Question

我有一个带有

contenteditable="true"

的 div，并且有两个带有

contenteditble="false"

和

user-select: all

的跨度。

现在，通过单击无法将光标放置在这两个跨度之间。

但是，如果我将用户选择更改为“文本”，它可以正常运行。

那么，如何通过单击将光标放置在使用

user-select:all

的两个节点之间？

演示： https://developer.mozilla.org/en-US/play?id=pToIaTfvo8adOT5tE7M22HX7GCiLb6yZ6R4cDSLaNQnMS%2B2BszfUm74s6OSu67faCW0ZKCPl8cn0eX9f

Answer 1

添加 javascript，用于通过用户选择将光标放置在跨度之间：全部通过使用 Range 和 Selection 对象来设置单击时光标的位置。 演示：https://developer.mozilla.org/en-US/play?id=dMfU2o7s8qzzVn3u6YzPmkVeWSdF1Q0RgTLV6yw9UVNpG3o%2BE4I3SdjEbxeZzJ7c6xu8ayUGe%2Bh52Lx3