如何获取 <input> 内选定文本的边界矩形？

Question

我可以用来document.createRange()获取文本节点中的一系列单个字符，然后Range.getBoundingClientRect()获取这些字符在屏幕上的位置。我想对元素中的文本执行相同的操作input，这过去只能在 IE 中使用createTextRange.

这个jsfiddle总结了问题 - http://jsfiddle.net/sobu5ug2/2/

我不能对 an 使用相同的方法，input因为Range.setStart/End对于 ，仅适用于元素级别，而不适用于字符级别input。我也尝试过window.getSelection().getRangeAt(0).getBoundingClientRect()，但返回的是全 0 的边界矩形。如果可能的话，我想在不实际选择文本的情况下执行此操作。

有没有办法在现代浏览器中做到这一点？谢谢。

Answer 1

以下是如何执行此操作的示例：

https://jh3y.medium.com/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a

您需要创建一个 div，将输入元素的所有样式复制到该 div 中，将所选文本复制到该 div 中，在该 div 内添加一个包含所选内容的跨度，然后您可以在删除之前测量相对于该 div 的该跨度再次div。