Javascript 在不丢失选择的情况下获取用户选择的开始和结束的像素位置

我正在开发一个javascript库，它以像素为单位获取用户选择的位置（突出显示的内容）

为了实现这一点，我将不可见的标记添加到DOM中，并使用jQuery

.position

获取像素位置。这些DOM更改导致用户选择丢失，因此我需要以编程方式重新创建它

我使用该库跨浏览器处理范围和选择

这是工作，但有一个错误，一直在逃避我几天，我似乎不能完全破解。重新创建选择后，如果用户按住Shift键并按Left或Right，则选择在Chrome中不会正确增长和收缩

显示问题的小提琴：

用鼠标从左到右突出显示“这是一些文本”的一部分

现在，如果按住Shift键并向右移动，所选内容将按预期从右侧展开

但是，如果按住Shift键并向左移动，则选择不会像预期的那样从右侧收缩。相反，它从左边开始生长

（注意……如果按Shift+Left键一次，它也会更改高亮显示方向，因此需要重新选择以查看从右侧展开是否能正常工作。）

这是在Chrome上发生的，但不是Firefox或Safari

我想我已经找到原因了。Chrome不会强制执行方向，除非你明确地说它是向后的。否则，它会等待用户先做什么。如果他们向右移动，它将成为向前选择。如果他们左移+左移，它将成为向后选择。所以在Chrome中，通过编程创建转发选择实际上根本不是转发…而是等待方向的选择

---

但是知道了这一点，我该怎么做呢？我认为我需要用一种不会导致选择丢失的方法来找到选择边界。对于这种方法有什么想法吗？

在大多数情况下，如果选择未折叠，则无需在DOM中插入任何内容即可获得选择的像素坐标。看，从那个人身上…谢谢你在这件事上所做的一切。我觉得我已经读了你所有的答案。在获取折叠范围的坐标时，似乎存在一系列跨浏览器问题。你认为我最好把“折叠”成一个字符的宽度，而不是零个字符？e、 你突出显示“一些文本”-然后我创建一个只包含“s”的范围，并在其周围获得矩形？谢谢创建一个包含一个字符的范围对我来说听起来不错：它应该比使用折叠的范围更可靠。