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

Question

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

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

有什么想法吗？

Answer 1

嗯，我真的没有看到jQuery事件中的任何内容，这些事件很容易让你得到插入符号的x y coord。

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

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;

这不准确，并不完美，但可能足够接近。

Answer 2

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

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