如何计算HTML输入框水平溢出时文本的负水平偏移？

我有一个标准HTML输入框，需要实时追踪指定单词的水平位置。目前的实现是创建一个不可见的<span>元素，填充输入框内容后用getClientRects()获取内容宽度，正常情况可行，但输入框有水平滚动特性：在末尾持续输入时，开头内容会被挤到左侧（文本向左溢出）：

• 滚动前：文本开头与输入框起始位置对齐
• 滚动后：文本开头被挤到输入框左侧，仅显示中间部分内容

补充说明：最终目标是计算输入框第一个字符的像素偏移量——偏移量为0表示文本开头与输入框起始位置对齐，偏移量为-100表示文本开头位于输入框起始位置左侧100像素处。仅计算文本宽度与输入框宽度的差值不适用，因为文本可能向左右两侧同时溢出。

快速获取第一个字符的偏移量 #

直接利用输入框原生的scrollLeft属性即可，无需手动计算字符宽度：

• 输入框的scrollLeft值代表文本向左滚动（被输入框左侧隐藏）的像素宽度
• 你需要的第一个字符偏移量就是 -inputElement.scrollLeft，完全符合你定义的偏移量规则。

精准追踪指定单词的位置 #

如果需要定位特定单词的实时位置，可以结合你之前的<span>模拟方法优化实现：

1. 确保不可见<span>与输入框使用完全一致的样式（字体、字号、内边距、边框等），保证尺寸计算的准确性
2. 输入框内容变化时，同步更新<span>的文本内容
3. 通过getClientRects()获取目标单词在<span>中的矩形区域，得到该单词相对于<span>起始位置的left偏移量
4. 结合输入框的scrollLeft值，计算单词相对于输入框可视区域的最终位置：目标单词的left偏移量 - inputElement.scrollLeft

这种方法可以覆盖文本双向溢出的场景，因为scrollLeft已经准确反映了文本整体的滚动偏移，再结合模拟元素的位置计算，就能得到精准的实时位置。

内容的提问来源于stack exchange，提问作者Revolutionary Citron