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

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

有没有一些jQuery插件? 或JavaScript的片段来做到这一点?

我已经找了一个textarea插入符号meteor自动完成的插件,所以我已经评估了GitHub上的所有8个插件。 目前为止,胜利者是来自Component的 textarea-caret-position 。

特征

  • 像素精度
  • 没有任何依赖关系
  • 浏览器兼容性:Chrome,Safari,Firefox(尽pipe它有两个 bug ),IE9 +; 可能工作,但没有在Opera,IE8或更旧的testing
  • 支持任何字体系列和大小,以及文本转换
  • 文本区域可以有任意的填充或边框
  • 不会被textarea中的水平或垂直滚动​​条所困惑
  • 支持硬返回,标签(IE除外)和文本中的连续空格
  • 在比文本区域中的列更长的行上的正确位置
  • 在包装长词时,在行尾没有“鬼”的位置

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

在这里输入图像描述

怎么运行的

镜像<div>是在屏幕外创build的,样式完全像<textarea> 。 然后,textarea的文本被复制到div中,并在它后面插入一个<span> 。 然后,span的文本内容被设置为textarea中文本的其余部分,以便忠实地再现人造div中的包装。

这是保证处理所有关于缠绕长线的边缘情况的唯一方法。 它也被GitHub用来确定@ user下拉的位置。

注意:这个答案描述了如何获得文本光标/脱字符的字符坐标 。 要find像素坐标,您需要进一步扩展。

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

  • 一个常规的插入光标在特定的位置
  • 一个文本select具有一定的有界区域
  • 不活跃:textarea没有焦点。 尚未使用。

IE模型使用Object document.selection ,从这里我们可以得到一个TextRange对象,它使我们能够访问select,从而访问光标位置。

FF模型/ Opera使用便利的variables[input] .selectionStart和selectionEnd。

两种模型都将一个常规的光标指针表示为零宽度select,左边界是光标位置。

如果input字段没有焦点,您可能会发现没有设置。 我用下面的代码取得了很好的效果,在当前的光标位置插入一段文字,如果有的话也replace当前的select。 根据确切的浏览器,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; } 

错误提示:链接没有被正确标记在顶部。

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

我不认为这可以在每个浏览器中完成。 有人已经在IE6中完成了它,但在FF或Opera(AFAIK)中不起作用。 也许你可以在所有的浏览器中使用它。

这是一个从2005年开始的博客文章 。