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

是否有一些jQuery插件？还是JavaScript代码段可以做到这一点？

解决方案

回答

我不认为可以在所有浏览器中完成。有人在IE6中完成了此操作，但在FF或者Opera(AFAIK)中不起作用。也许我们可以使其在所有浏览器中正常工作。

这是2005年的博客文章。

回答

注意：此答案描述了如何获取文本光标/插入符号的字符坐标。要找到像素坐标，我们需要进一步扩展它。

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

• 在特定位置的常规插入光标
• 具有一定边界区域的文本选择
• 未激活：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/zh-cn/library/ms535869(VS.85).aspx
TextRange对象：http://msdn.microsoft.com/zh-cn/library/ms535872(VS.85).aspx