使用jQuery在文本区域的光标位置创建工具提示

Question

我正在尝试在文本区域中的输入插入符号上方创建工具提示.如果我可以在文本区域中获得插入符号的x,y坐标,这将很容易,但是我已经搜索了一会儿并且无法弄清楚如何做到这一点.

假设用户在文本区域中键入然后按某个键(例如@符号).我试图在文本区域插入符号上方显示一个小工具提示.

有任何想法吗？

Answer 1

嗯，我在 jQuery 事件中并没有真正看到任何可以轻松为您提供插入符号的 xy 坐标的内容。

然而，有很多方法可以检测文本字段中的插入符位置：

http://laboratorium.0xab.cd/jquery/fieldselection/0.1.0/test.html

是否可以以编程方式检测 <input type=text> 元素中的插入符位置？

文本区域中的插入符位置（从头开始的字符数）

使用它，您可以尝试估计工具提示的像素坐标。

如果您希望更精确，请在文本字段内使用等宽字体。

//depending on size of font
var charWidth = 10;
//using any number of the above methods to get caret position
var caretPosition = getCaretPos('#myTextField');
var textFieldOffsetX = $('#myTextField').offset.left;
var toopTipPositionX = caretPosition * charWidth + textFieldOffsetX;

它并不精确，也不会完美，但可能已经足够接近了。