使用jQuery在文本区域中创建跟随光标位置的提示框

Question

我正在尝试在文本区域中创建一个提示框，位于输入符号的上方。如果我能够获取文本区域中光标的x，y坐标，那么这将很容易实现，但是我已经搜索了一段时间，无法弄清楚如何做到这一点。

假设用户在文本区域中键入文字，然后按下某个键（例如@符号），我正在尝试在文本区域光标上方显示一个小提示框。

有什么想法吗？

- Marc

---

http://jquery.bassistance.de/tooltip/demo/ - Hari Pachuveetil

@FloydPink 我知道如何创建工具提示。问题是是否可以在文本区域的插入符位置创建工具提示。 - Marc

通过谷歌搜索，我认为这就是您要找的内容：https://dev59.com/KU3Sa4cB1Zd3GeqPsBJI - CraigW

顺便说一下，没有任何一种方法是跨浏览器的。 - BNL

@BNL 是的，那些方法会是什么？ - amosrivera

Answer 1

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

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

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

程序上是否有可能检测到<input type=text>元素内的插入符位置？

Textarea中插入符位置，以字符为单位从开头算起

利用此方法，您可以尝试估计工具提示的像素坐标。

如果您想要更准确的结果，请在文本框内使用等宽字体。

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

它不是精确的，也不会完美无缺，但它可能足够接近。

- Tyler J. Hutchison

Answer 2

为什么工具提示必须在插入符号处？为什么不能将其定位在文本区域上方（或周围某个位置）？这里有一个演示，可以更好地说明我的意思。

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

- Mottie

---

因为如果你有一个很大的文本区域，它可能会定位到屏幕外面。 - PhoneixS