得到相对于可见线起点的插入位置

Question

我知道我可以使用以下行来获取插入符号（光标位置）相对于当前元素的偏移量：

offset = window.getSelection().getRangeAt(0).startOffset;

但有时元素会包含很多文本，文本会自动换行。如何找到相对于最近的包裹的偏移量（如果有的话）？

例如，给定以下文本全部在一个元素中：

<p>abcdefghjiklmnopqrstuvwxyz test</p>

假设它按如下方式自动换行：

abcdefghjiklmnopqrstuvwxyz
test
   ^cursor before this 't'

如果光标位于测试中的“s”和“t”之间，则上面的代码将为偏移分配值30（第1行26个字符，加空格，加上t，e和s）。但我希望它在这种情况下返回3：相对于线的明显开始，光标只偏移3（'t'，'e'和's'在光标之前。）

如何在简单的跨平台JavaScript中完成此操作？

更新

如果有更简单的方法来完成我想要做的事情，这里就是。我有一个元素表，我将单独转换为内容可编辑块。当向下箭头被释放并且我看到箭头移动到TD的末尾时，我将焦点（和可编辑的内容）移动到下一个单元格。但是，我还需要将光标定位在它之前在前一行的位置。我使用的是等宽字体，所以只需使用与之前明显的起始线相同的偏移即可。

将整个表设置为contentEditable不起作用，因为箭头键的行为不是我想要的。例如，当我按下字段底部时，它会将光标移动到右边下一个字段的开头，这对我来说毫无意义。

Answer 1

您可以使用Range.prototype.getClientRects()来获取范围的边界客户端矩形。例如，如果有一个文本节点环绕到第二行，则其范围将在每一行都有矩形。您可以创建一个“前哨”范围来读取其矩形，然后循环调整，直到矩形的顶部或底部发生变化，将其后退一点，然后查看其位置。然后将其位置与起点进行比较，您将获得相对于行的偏移。