如何在文本框中获取插入符号的（x，y）像素坐标？

Question

我正在使用jQuery并试图找到一种跨浏览器方式来获取<textarea>和input框中插入符号的像素坐标，以便我可以在此位置放置一个绝对定位的div。

是否有一些jQuery插件？或者JavaScript代码片段呢？

Answer 1

我已经找到了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 2

注意：此答案描述了如何获取text-cursor / caret的字符坐标。要找到像素坐标，您需要进一步扩展它。

首先要记住的是光标可以处于三种状态

• 在特定位置的常规插入光标
• 具有特定有界区域的文字选择
• 未激活：textarea没有焦点。尚未使用过。

IE模型使用Object document.selection，从中我们可以得到一个TextRange对象，它允许我们访问选择，从而访问光标位置。

FF模型/ Opera使用方便的变量[input] .selectionStart和selectionEnd。

两种模型都将常规活动光标表示为零宽度选择，左边界是光标位置。

如果输入字段没有焦点，您可能会发现两者都没有设置。 我使用以下代码取得了很好的成功，在当前光标位置插入一段文本，同时替换当前选择（如果存在）。 取决于确切的浏览器，YMMV。

function insertAtCursor(myField, myValue) {

/* selecion model - ie */
if (document.selection) {
  myField.focus();
  sel = document.selection.createRange();
  sel.text = myValue;
}

/* field.selectionstart/end  firefox */ 
else if (myField.selectionStart || myField.selectionStart == '0' ) {

  var startPos = myField.selectionStart;
  var endPos = myField.selectionEnd;
  myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);

  myField.selectionStart = startPos + myValue.length;
  myField.selectionEnd = startPos + myValue.length;
  myField.focus();
} 

// cursor not active/present
else {
  myField.value += myValue;
}

错误注意：链接未在顶部参数中正确标记。

选择对象：http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx
TextRange对象：http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Answer 3

我不认为它可以在每个浏览器中完成。有人在IE6中完成了它，但它在FF或Opera（AFAIK）中不起作用。也许你可以在所有浏览器中使用它。

Here's a blog post from 2005