事先确定插入位置

Question

例如：

使用|作为插入标识符

<span>Hello</span>
<span>Sta|ckOverflow</span>

如果我按向上箭头键，则插入位置

<span>Hel|lo</span>
<span>StackOverflow</span>

对于这个例子，这些跨度位于contentEditable div。

中

如何手动计算range，以便我可以在两个L之间放置插入符号。

基础范围：

startOffset/endOffset: 3, startContainer/endContainer: Hello(text node)

如果按下箭头键，如何计算未来的插入符号位置。如果按下向上箭头键，结果将是：

startOffset/endOffset: 3, startContainer/endContainer: Hello(text node)

就像：

function getFutureRange(keyboardMouseEvent,oldRange){
/*some code here*/
return futureRange; //spits out startOffset/endOffset: 3, startContainer/endContainer: Hello(text node)
}

我不一定需要代码。只需API，文档或概念即可开始使用。

我只是想知道范围是如何根据contentEditable，textAreas，文本输入等选择来计算范围的......为什么？与我的question相关，选择因浏览器而异。

除了使用getClientRects()之外，我现在无法想到任何解决方案，并通过获取每个角色来计算偏移量（宽度，高度）。我不知道如何获得角色的作品。我几乎陷入困境，我不知道这是否是最佳方式。