在我的项目中，我试图以textarea像素为单位获取插入符号的偏移位置。这能做到吗？
在问这里之前，我浏览了很多链接，尤其是 Tim Down 的，但是我找不到适用于 IE8+、Chrome 和 Firefox 的解决方案。似乎Tim Down 正在为此努力。
我发现的其他 一些链接有很多问题，比如找不到插入符号位置的顶部偏移量。
我正在尝试获取插入符号的偏移位置，因为我想根据插入符号的偏移位置对其进行定位，从而在其中显示一个自动完成建议框textarea。
PS：我不能使用 acontenteditable div因为我写了很多与 a 相关的代码textarea。
您可以创建一个单独的（不可见的）元素，并从开始到光标位置用 textarea 内容填充它。Textarea 和“克隆”应该具有匹配的 CSS（字体属性、内边距/边距/边框和宽度）。然后将这些元素堆叠在一起。
让我从一个工作示例开始，然后遍历代码：http : //jsfiddle.net/g7rBk/
HTML：
<textarea id="input"></textarea>
<div id="output"><span></span></div>
<div id="xy"></div>
Textarea 是不言自明的。输出是一个隐藏元素，我们将向其传递文本内容并进行度量。重要的是我们将使用内联元素。“xy” div 只是用于测试目的的指标。
CSS：
/* identical styling to match the dimensions and position of textarea and its "clone"
*/
#input, #output {
position:absolute;
top:0;
left:0;
font:14px/1 monospace;
padding:5px;
border:1px solid #999;
white-space:pre;
margin:0;
background:transparent;
width:300px;
max-width:300px;
}
/* make sure the textarea isn't obscured by clone */
#input {
z-index:2;
min-height:200px;
}
#output {
border-color:transparent;
}
/* hide the span visually using opacity (not display:none), so it's still measurable; make it break long words inside like textarea does. */
#output span {
opacity:0;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* the cursor position indicator */
#xy {
position:absolute;
width:4px;
height:4px;
background:#f00;
}
JavaScript：
/* get references to DOM nodes we'll use */
var input = document.getElementById('input'),
output = document.getElementById('output').firstChild,
position = document.getElementById('position'),
/* And finally, here it goes: */
update = function(){
/* Fill the clone with textarea content from start to the position of the caret. You may need to expand here to support older IE [1]. The replace /\n$/ is necessary to get position when cursor is at the beginning of empty new line.
*/
output.innerHTML = input.value.substr( 0, input.selectionStart ).replace(/\n$/,"\n\001");
/* the fun part!
We use an inline element, so getClientRects[2] will return a collection of rectangles wrapping each line of text.
We only need the position of the last rectangle.
*/
var rects = output.getClientRects(),
lastRect = rects[ rects.length - 1 ],
top = lastRect.top - input.scrollTop,
left = lastRect.left+lastRect.width;
/* position the little div and see if it matches caret position :) */
xy.style.cssText = "top: "+top+"px;left: "+left+"px";
}
[1]在 textarea 中插入符号的位置，从开始的字符数
[2] https://developer.mozilla.org/en/docs/DOM/element.getClientRects
编辑：此示例仅适用于固定宽度的 textarea。要使其与用户可调整大小的 textarea 一起使用，您需要将事件侦听器添加到调整大小事件并设置 #output 尺寸以匹配新的 #input 尺寸。
这是使用rangyinputs、rangy和jQuery 的方法。
它基本上将整个文本从内部复制textarea到div相同大小的a中。我设置了一些 CSS 以确保在每个浏览器中，textarea和div以完全相同的方式包装它们的内容。
当textarea被点击时，我读出在该字符索引插入符号被定位，然后我插入一个插入符span内的同一索引处div。span如果用户单击行的开头，我最终会遇到插入符号跳回上一行的问题。为了解决这个问题，我检查前一个字符是否是 a space（这将允许发生换行），如果是true，我将它包装在 a 中span，然后将下一个单词（插入符号位置直接后面的那个）包装在 a 中span。现在我比较这两个span's之间的最高值，如果它们不同，则有一些包装正在进行，所以我假设top和 的left值#nextword span等同于插入符号位置。
这种方法仍然可以改进，我敢肯定我还没有想到可能会出错的一切，即使我有，我也没有费心为所有这些问题实施修复，因为我没有现在是时候这样做了，您需要考虑以下几点：
目前，它在 Windows 8 上的浏览器中的工作方式完全相同，使用最新版本的 Chrome、Firefox、IE 和 Safari。虽然我的测试不是很严格。
这是一个jsFiddle.
我希望它会帮助你，至少它可以给你一些想法。
我已经包含了一个ul位于正确位置的for you，并修复了一个 Firefox 问题，即textarea在 DOM 操作后选择没有重新设置回原来的位置。
我添加了 IE7 - IE9 支持并修复了评论中指出的多词选择问题。
我添加了对连续插入Enter多个空格的硬回车的支持。
我有固定的默认行为问题ctrl+ shift+left arrow的文本选择方法。
JavaScript
function getTextAreaXandY() {
// Don't do anything if key pressed is left arrow
if (e.which == 37) return;
// Save selection start
var selection = $(this).getSelection();
var index = selection.start;
// Copy text to div
$(this).blur();
$("div").text($(this).val());
// Get current character
$(this).setSelection(index, index + 1);
currentcharacter = $(this).getSelection().text;
// Get previous character
$(this).setSelection(index - 1, index)
previouscharacter = $(this).getSelection().text;
var start, endchar;
var end = 0;
var range = rangy.createRange();
// If current or previous character is a space or a line break, find the next word and wrap it in a span
var linebreak = previouscharacter.match(/(\r\n|\n|\r)/gm) == undefined ? false : true;
if (previouscharacter == ' ' || currentcharacter == ' ' || linebreak) {
i = index + 1; // Start at the end of the current space
while (endchar != ' ' && end < $(this).val().length) {
i++;
$(this).setSelection(i, i + 1)
var sel = $(this).getSelection();
endchar = sel.text;
end = sel.start;
}
range.setStart($("div")[0].childNodes[0], index);
range.setEnd($("div")[0].childNodes[0], end);
var nextword = range.toHtml();
range.deleteContents();
var position = $("<span id='nextword'>" + nextword + "</span>")[0];
range.insertNode(position);
var nextwordtop = $("#nextword").position().top;
}
// Insert `#caret` at the position of the caret
range.setStart($("div")[0].childNodes[0], index);
var caret = $("<span id='caret'></span>")[0];
range.insertNode(caret);
var carettop = $("#caret").position().top;
// If preceding character is a space, wrap it in a span
if (previouscharacter == ' ') {
range.setStart($("div")[0].childNodes[0], index - 1);
range.setEnd($("div")[0].childNodes[0], index);
var prevchar = $("<span id='prevchar'></span>")[0];
range.insertNode(prevchar);
var prevchartop = $("#prevchar").position().top;
}
// Set textarea selection back to selection start
$(this).focus();
$(this).setSelection(index, selection.end);
// If the top value of the previous character span is not equal to the top value of the next word,
// there must have been some wrapping going on, the previous character was a space, so the wrapping
// would have occured after this space, its safe to assume that the left and top value of `#nextword`
// indicate the caret position
if (prevchartop != undefined && prevchartop != nextwordtop) {
$("label").text('X: ' + $("#nextword").position().left + 'px, Y: ' + $("#nextword").position().top);
$('ul').css('left', ($("#nextword").position().left) + 'px');
$('ul').css('top', ($("#nextword").position().top + 13) + 'px');
}
// if not, then there was no wrapping, we can take the left and the top value from `#caret`
else {
$("label").text('X: ' + $("#caret").position().left + 'px, Y: ' + $("#caret").position().top);
$('ul').css('left', ($("#caret").position().left) + 'px');
$('ul').css('top', ($("#caret").position().top + 14) + 'px');
}
$('ul').css('display', 'block');
}
$("textarea").click(getTextAreaXandY);
$("textarea").keyup(getTextAreaXandY);
HTML
<div></div>
<textarea>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</textarea>
<label></label>
<ul>
<li>Why don't you type this..</li>
</ul>
CSS
body {
font-family: Verdana;
font-size: 12px;
line-height: 14px;
}
textarea, div {
font-family: Verdana;
font-size: 12px;
line-height: 14px;
width: 300px;
display: block;
overflow: hidden;
border: 1px solid black;
padding: 0;
margin: 0;
resize: none;
min-height: 300px;
position: absolute;
-moz-box-sizing: border-box;
white-space: pre-wrap;
}
span {
display: inline-block;
height: 14px;
position: relative;
}
span#caret {
display: inline;
}
label {
display: block;
margin-left: 320px;
}
ul {
padding: 0px;
margin: 9px;
position: absolute;
z-index: 999;
border: 1px solid #000;
background-color: #FFF;
list-style-type:none;
display: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
span {
white-space: pre-wrap;
}
}
div {
/* Firefox wrapping fix */
-moz-padding-end: 1.5px;
-moz-padding-start: 1.5px;
/* IE8/IE9 wrapping fix */
padding-right: 5px\0/;
width: 295px\0/;
}
span#caret
{
display: inline-block\0/;
}
与其他答案中提供的内容相比，以像素为单位获取插入符号位置的解决方案要简单得多。
请注意，此问题与 2008 年的问题重复，我已在此处回答。我只会在那个链接上保留答案，因为这个问题应该在几年前重复关闭。
我已经寻找了用于meteor-autocomplete的textarea caret 坐标插件，所以我已经评估了GitHub 上的所有8 个插件。到目前为止，获胜者是来自Component 的textarea-caret-position。
镜子<div>是在屏幕外创建的，其样式与<textarea>. 然后，直到插入符号的 textarea 的文本被复制到 div 中，并<span>在它之后插入a 。然后，将span的文本内容设置为textarea中文本的剩余部分，以忠实地再现仿div中的换行。
这是保证处理所有与长行换行有关的边缘情况的唯一方法。GitHub 也使用它来确定其@user下拉列表的位置。
JsFiddle 工作示例：http : //jsfiddle.net/42zHC/2/
基本上，我们计算出多少列适合宽度（因为它将是等宽的）。我们必须强制滚动条始终在那里，否则计算就会关闭。然后我们将适合宽度的列数除以，我们得到每个字符的 x 偏移量。然后我们在textarea上设置行高。由于我们知道一行中有多少个字符，我们可以将其除以字符数，我们得到行号。有了行高，我们现在有了 y 偏移量。然后我们得到 textarea 的 scrollTop 并减去它，这样一旦它开始使用滚动条，它仍然显示在正确的位置。
Javascript：
$(document).ready(function () {
var cols = document.getElementById('t').cols;
var width = document.getElementById('t').clientWidth;
var height = $('textarea').css('line-height');
var pos = $('textarea').position();
$('#t').on('keyup', function () {
el = document.getElementById("t");
if (el.selectionStart) {
selection = el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
selection = 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
selection = rc.text.length;
} else { selection = 0 }
var row = Math.floor((selection-1) / cols);
var col = (selection - (row * cols));
var x = Math.floor((col*(width/cols)));
var y = (parseInt(height)*row);
$('span').html("row: " + row + "<br>columns" + col + "<br>width: " + width + "<br>x: " + x +"px<br>y: " + y +"px<br>Scrolltop: "+$(this).scrollTop()).css('top',pos.top+y-$(this).scrollTop()).css('left',pos.left+x+10);
});
});
HTML：
<textarea id="t"></textarea>
<br>
<span id="tooltip" style="background:yellow"></span>
CSS：
textarea {
height: 80px;
line-height: 12px;
overflow-y:scroll;
}
span {
position: absolute;
}
我找不到类似的东西，所以我的解决方案是在 textarea 中找到插入符号的字符位置，剪切当前段落并将其显示在 textarea 旁边。
使用偏移量，我在此可编辑文本视图中放置了一个假光标（div, display:inline, 1px 宽, border-left: 1px solid black）。
通过这种方式，您可以创建一个视觉反馈区域，您可以在其中显示效果的结果（就像 stackoverflow 在您编写答案时所做的那样）。