在textarea或输入上获取键盘焦点的坐标

Question

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

换句话说，如果我的输入标签出现文字：

hello world | bla bla

然后我想得到键盘光标的坐标。通过猜测看起来像80px向右，5px向下。

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

Answer 1

如果使用等宽字体，然后将可见字符数乘以当前使用的字体宽度，则只能有精确值。

Answer 2

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

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

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