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

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

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

有任何想法吗？

Answer 1

嗯，我真的没有看到任何jQuery事件，很容易给你一个xy coord的插入符号。

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

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

是否可以以编程方式检测元素中的插入位置？

在textarea中的插入位置，从一开始就是字符

使用此function，您可以尝试估算工具提示的像素坐标。

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

//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; 

这不是确切的，它不会是完美的，但它可能足够接近。

Answer 2

为什么工具提示必须在插入符号？ 为什么不把它放在textarea的上方（或某处）？ 这是我的意思的演示 。

 $('textarea').keyup(function(e) { switch (e.which) { // @ symbol case 50: makeTooltip(e, 'you typed in an at symbol'); break; } });