获取文本区域或输入上的键盘焦点坐标答案

【问题标题】：Get coordinates of keyboard focus on textarea or input获取文本区域或输入上的键盘焦点坐标
【发布时间】：2012-01-12 02:01:24
【问题描述】：

我不确定 |称为键盘光标。无论如何，我有一个输入控件，我想获得 | 的坐标。是。

换句话说，如果我的输入标签包含文本：

hello world | bla bla

然后我想获取键盘光标的坐标。通过猜测看起来像右边 80 像素和底部 5 像素。

我知道如何获取光标的位置，然后我可以通过计算字符数来估计位置，但这并不可靠，因为有些字母比其他字母宽。换句话说，我将能够通过使用this technique 来判断光标位于位置 12。

【问题讨论】：

标签： javascript input keyboard cursor textarea

【解决方案1】：

如果您使用的是等宽字体，然后将可见字符数乘以当前使用的字体宽度，您只能获得一个精确值。

【讨论】：

【解决方案2】：

您可以创建另一个元素（或另一个带有 display:inline 的容器），其内容与光标左侧的文本相同 (text.value.substr(0,text.getCaretPosition())。在 #fakeText 元素之后添加另一个 . 然后确保 #fakeText 的所有 CSS 样式与您的文本输入/文本区域相同，除了 display:inline。

最后测量#fakeCaret 相对于#fakeText 左上角的位置。这种方法是我知道的唯一一种，它为可变宽度字体提供 x 和 y 坐标。

我们在 nk.pl 中使用这种方法将自动完成器定位在插入符号的正下方。

【讨论】：