在文本区域中获取插入符号XY坐标

Question

是否有任何好的JQuery / JS解决方案可以获得文本区域中插入符号的绝对位置（以X / Y坐标或顶部/左侧坐标给出）。
keyDown JQuery函数的本机Event对象给出了光标的x / y坐标，我想要一些类似工作插入符号的工作。

我的目标是添加一个浮动的HTML元素，它将相对于工作插入位置定位，所以我需要以某种方式获得它的位置。

我需要解决方案来处理TextArea元素，但任何可编辑的html元素的通用解决方案都会更好！

Answer 1

您可能希望将<textarea>替换为<div contenteditable="true">，它具有几乎相同的行为，您可以通过常规方式获取坐标。

Answer 2

This jQuery插件正是您所需要的！

Answer 3

我已经找到了meteor-autocomplete的textarea插入符号插件，所以我已经评估了GitHub上的所有8个插件。到目前为止，获胜者是来自组件的textarea-caret-position。

功能

• 像素精度
• 无任何依赖
• 浏览器兼容性：Chrome，Safari，Firefox（尽管它有two bugs），IE9 +;可以工作，但未在Opera，IE8或更早版本中测试
• 支持任何字体系列和大小，以及文本转换
• 文本区域可以有任意填充或边框
• 不会被textarea中的水平或垂直滚动​​条混淆
• 支持硬回车，标签（IE上除外）和文本中的连续空格
• 在比文本区域中的列长的行上更正位置
在包装长字时，
• 在行尾没有"ghost" position in the empty space

这是一个演示 - http://jsfiddle.net/dandv/aFPA7/

如何运作

镜像<div>在屏幕外创建，样式与<textarea>完全相同。然后，将插入到插入符号的textarea文本复制到div中，并在其后插入<span>。然后，跨度的文本内容被设置为textarea中文本的剩余部分，以便忠实地再现人造div中的包装。

这是保证处理与包装长行相关的所有边缘情况的唯一方法。它也被GitHub用来确定 @ 用户下拉列表的位置。

Answer 4

http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/

这个家伙和你一样心态：）

$('textarea').click(function (e){
    var   x =  e.pageX;
    var   y =  e.pageY;
    //int of top position
    //remember u need absolute position to calculate parents,grandparents to find true                    
    // position from body tag to whereever textarea might be (html) wise
    var tx = parseInt($(this).css('left'));
    var ty = parseInt($(this).css('top')); 
    var fx = x-tx; //final x
    var fy = y-ty; // final y
    console.log('X=> '+fx);
    console.log('Y=>'+fy);
});

注意：我可能会将x和y轴与上下左右混淆，因为我有阅读障碍，并且发现很难记住这么简单的税:) :)

我认为这可能会给你页面坐标，所以记住它会带走textarea的（绝对）offeseTop，而左边是x和y然后你有它:)。