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

Get coordinates of keyboard focus on textarea or input

本文关键字：输入坐标区域键盘焦点文本获取更新时间：2023-09-26

我不确定|是否被称为键盘光标。无论如何，我有一个输入控件，我想得到|所在位置的坐标。

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

hello world | bla bla

那么我想得到键盘光标的坐标。通过向右猜测80像素，向下猜测5像素。

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

只有当您使用单空格字体，然后将可见字符数乘以当前使用的字体宽度时，才能有一个精确的值。

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

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

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