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

【问题标题】：Create tooltip at cursor position in text area with jQuery使用jQuery在文本区域的光标位置创建工具提示
【发布时间】：2011-09-29 20:01:33
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

jquery.bassistance.de/tooltip/demo
@FloydPink 我知道如何创建工具提示。问题是是否可以在文本区域的插入符号位置创建工具提示。
做了一些谷歌搜索，我认为这就是你要找的，stackoverflow.com/questions/2605133/…
顺便说一句，没有任何一种方法可以跨浏览器。
@BNL 是的，这些方法是什么？

标签： jquery

【解决方案1】：

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

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

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

Is it possible to programmatically detect the caret position within a <input type=text> element?

Caret position in textarea, in characters from the start

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

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

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

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

【讨论】：

【解决方案2】：

为什么工具提示必须在插入符号处？为什么不将它放在文本区域上方（或周围的某个地方）？这是a demo 我的意思。

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

【讨论】：