如何获取文本框中插入符号的 (x, y) 像素坐标？

Question

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

有一些 jQuery 插件吗？或者 JavaScript 片段来做到这一点？

Answer 1

我正在寻找一个文本区域插入符坐标插件 流星自动完成, ，所以我评估了 GitHub 上的所有 8 个插件。到目前为止，获胜者是 文本区域插入符位置 从 成分.

特征

• 像素精度
• 没有任何依赖关系
• 浏览器兼容性：Chrome、Safari、Firefox（尽管 二 虫子 它有），IE9+；可能可以工作，但未在 Opera、IE8 或更早版本中进行测试
• 支持任何字体系列和大小，以及文本转换
• 文本区域可以有任意填充或边框
• 不会被文本区域中的水平或垂直滚动​​条混淆
• 支持文本中的硬回车、制表符（IE 除外）和连续空格
• 比文本区域中的列长的行上的正确位置
• 不 空旷空间中的“幽灵”位置 当换行长单词时在行尾

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

怎么运行的

一面镜子 <div> 是在屏幕外创建的，并且样式与 <textarea>. 。然后，将文本区域中直到插入符号的文本复制到 div 中，并创建一个 <span> 紧接着插入。然后，将跨度的文本内容设置为文本区域中文本的其余部分，以便忠实地再现人造 div 中的换行。

这是保证处理与换行长线有关的所有边缘情况的唯一方法。GitHub 也使用它来确定其位置 @ 用户下拉菜单。

Answer 2

笔记：这个答案描述了如何获得 字符坐标 文本光标/插入符号的。要找到像素坐标，您需要进一步扩展它。

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

• 特定位置的常规插入光标
• 具有特定边界区域的文本选择
• 不活跃：文本区域没有焦点。尚未使用过。

IE模型使用Object 文档选择, ，由此我们可以得到 文本范围 对象，它使我们能够访问选择内容，从而访问光标位置。

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
文本范围对象： http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Answer 3

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

这是 2005 年的博客文章.