我如何在文本框中插入符号（X，Y）像素坐标？我如何在文本框中插入符号（X，Y）像素坐标？(How d

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

有一些jQuery插件？或JavaScript代码段能够做到这一点？

Answer 1:

我找了一个文本插入符，对于坐标插件流星自动完成，所以我已经评估GitHub上所有的8个插件。获胜者是，迄今为止，文本区域，插入符位置的组件。

特征

像素精度
没有依赖任何
浏览器兼容性：铬，Safari浏览器，火狐（尽管2个臭虫它有），IE9 +; 可以工作，但在Opera，IE8或以上没有测试
支持任何字体和字号，以及文本转换
文本区域可以有任意填充或边框
不是由textarea的水平或垂直滚动条混淆
支持硬回车，制表符（除了在IE），并在文本连续的空格
文本中的面积比列线较长正确的位置
没有在空的空间“鬼”的位置处的线的端部缠绕长单词时

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

这个怎么运作

的反射镜<div>被关闭屏幕创建和准确风格像<textarea> 。然后，textarea的可达插入符文本被复制到div和一个<span>之后右它插入。然后，跨度的文本内容设置为在textarea的文本的其余部分，为了真实地再现包裹在人造DIV。

这是保证处理所有有关包装线长的边缘情况的唯一方法。它也使用了GitHub上，以确定其@用户下拉菜单的位置。

Answer 2:

注意：这个答案说明如何获取文本光标/插入符号的字符坐标 。要找到像素坐标，则需要进一步扩大这一点。

首先要记住的事情是，光标可以在三种状态

定期插入光标在特定的位置
具有一定的边界区域文本选择
未激活：文本不具有焦点。尚未使用。

该IE模型使用对象document.selection ，由此我们可以得到一个的TextRange对象，它使我们获得了选择，因此光标位置（一个或多个）。

该FF模型/歌剧使用便于使用的变量[输入] .selectionStart和选定结束。

这两种模型代表一个普通ative光标作为零宽度选择，以及绑定是光标位置在左边。

如果输入字段没有焦点，你会发现都没有设置。我曾与下面的代码很好的成功在当前光标位置插入一段文字，也替换当前选择，如果存在的话。根据确切的浏览器，情况因人而异。

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