javascript 在文本区域中获取插入符号 XY 坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5082921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get caret XY coordinates in text area
提问by orshachar
Is there any good JQuery/JS solution to get the absolute position of a caret in text area (given in X/Y coordinates OR top/left coordinates).
The native Event object of keyDown JQuery function gives the x/y coordinates of the cursor and I want something similar the works on the working caret.
My goal is to add a floating HTML element the will be positioned relatively to the working caret position so I need to somehow get its position.
是否有任何好的 JQuery/JS 解决方案来获取文本区域中插入符号的绝对位置（以 X/Y 坐标或上/左坐标给出）。
keyDown JQuery 函数的本机 Event 对象给出了光标的 x/y 坐标，我想要一些类似于工作插入符号的作品。
我的目标是添加一个浮动 HTML 元素，该元素将相对于工作插入符号位置定位，因此我需要以某种方式获取其位置。
I need the solution to work on TextArea elements but a general solution to any editable html element would be even better!
我需要在 TextArea 元素上工作的解决方案，但任何可编辑 html 元素的通用解决方案会更好！
回答by Dan Dascalescu
I've looked for a textarea caret coordinates plugin for meteor-autocomplete, so I've evaluated all the 8 plugins on GitHub. The winner is, by far, textarea-caret-positionfrom Component.
我已经寻找了用于meteor-autocomplete的textarea caret 坐标插件，所以我已经评估了GitHub 上的所有8 个插件。到目前为止，获胜者是来自Component 的textarea-caret-position。
Features
特征
- pixel precision
- no dependencies whatsoever
- browser compatibility: Chrome, Safari, Firefox (despite twobugsit has), IE9+; may work but not tested in Opera, IE8 or older
- supports any font family and size, as well as text-transforms
- the text area can have arbitrary padding or borders
- not confused by horizontal or vertical scrollbars in the textarea
- supports hard returns, tabs (except on IE) and consecutive spaces in the text
- correct position on lines longer than the columns in the text area
- no "ghost" position in the empty spaceat the end of a line when wrapping long words
- 像素精度
- 没有任何依赖
- 浏览器兼容性：Chrome、Safari、Firefox（尽管有两个错误）、IE9+；可以工作，但未在 Opera、IE8 或更早版本中测试
- 支持任何字体系列和大小，以及文本转换
- 文本区域可以有任意填充或边框
- 不会被 textarea 中的水平或垂直滚动条混淆
- 支持硬回车、制表符（IE 除外）和文本中的连续空格
- 比文本区域中的列长的行上的正确位置
- 换行长单词时，行尾空白处没有“幽灵”位置
Here's a demo - http://jsfiddle.net/dandv/aFPA7/
这是一个演示 - http://jsfiddle.net/dandv/aFPA7/
How it works
怎么运行的
A mirror <div>is created off-screen and styled exactly like the <textarea>. Then, the text of the textarea up to the caret is copied into the div and a <span>is inserted right after it. Then, the text content of the span is set to the remainder of the text in the textarea, in order to faithfully reproduce the wrapping in the faux div.
镜子<div>是在屏幕外创建的，其样式与<textarea>. 然后，直到插入符号的 textarea 的文本被复制到 div 中，并<span>在它之后插入a 。然后，将span的文本内容设置为textarea中文本的剩余部分，以忠实地再现仿div中的换行。
This is the only method guaranteed to handle all the edge cases pertaining to wrapping long lines. It's also used by GitHub to determine the position of its @user dropdown.
这是保证处理所有与长行换行有关的边缘情况的唯一方法。GitHub 也使用它来确定其@user下拉列表的位置。
回答by Valentin Kantor
may be you want replace <textarea>with <div contenteditable="true">, it has almost the same behavior, and you can get coordinates by conventional way.
可能您想替换<textarea>为<div contenteditable="true">，它具有几乎相同的行为，并且您可以通过常规方式获取坐标。
回答by Val
http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
this guy was on same mindset as u :)
这家伙和你有同样的心态:)
$('textarea').click(function (e){
var x = e.pageX;
var y = e.pageY;
//int of top position
//remember u need absolute position to calculate parents,grandparents to find true
// position from body tag to whereever textarea might be (html) wise
var tx = parseInt($(this).css('left'));
var ty = parseInt($(this).css('top'));
var fx = x-tx; //final x
var fy = y-ty; // final y
console.log('X=> '+fx);
console.log('Y=>'+fy);
});
NOTE: I might have mixed up the x and y axes with top and left because I'm dyslexic and find it difficult to remember such simple tax :)
注意：我可能将 x 轴和 y 轴与顶部和左侧混淆了，因为我有阅读障碍，很难记住这么简单的税:)
I think that might give you the page coordinates, so with that in mind take away the textarea's (absolute) offeseTop, and Left from x and y then there u have it :) .
我认为这可能会给你页面坐标，所以考虑到这textarea一点，去掉（绝对）offeseTop，然后从 x 和 y 离开，然后你就有了 :) 。
