Javascript 预先确定插入符号位置

例如：

使用

|

作为插入符号标识符

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

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

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、text inputs等选择来计算的……为什么？对于“我的”，所选内容因浏览器而异

---

除了使用

getclientracs（）

并通过获取每个字符的矩形来计算偏移量（宽度、高度），我现在想不出任何解决方案。我不知道如何获得角色的矩形。我几乎被卡住了，我不知道这是不是最好的方法

你能解释一下你想达到什么目的吗？@RomanCortes我想知道选择或范围的基本计算，以便它能正确定位插入符号。但我找不到关于它的文档/API。但是，您是否正在尝试创建一个文本编辑器？如果是，为什么不使用contentEditable？你能解释一下上下文吗？@RomanCortes是的，我现在正在编辑这个问题。我明白了，所以你想在设置范围之前找出范围。我不相信有任何可用的，所以您可能需要使用getClientRects。但是，这会匹配所有OSs/浏览器吗？你需要测试一个LOT，你介意解释一下你想要达到什么目的吗？@RomanCortes我想知道选择或范围的基本计算，以便它能够正确定位插入符号。但我找不到关于它的文档/API。但是，您是否正在尝试创建一个文本编辑器？如果是，为什么不使用contentEditable？你能解释一下上下文吗？@RomanCortes是的，我现在正在编辑这个问题。我明白了，所以你想在设置范围之前找出范围。我不相信有任何可用的，所以您可能需要使用getClientRects。但是，这会匹配所有OSs/浏览器吗？你需要做很多测试

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