对于我的一个项目，我很想为特定的文本区域提供自动完成功能。类似于智能感知/全能的工作方式。然而，为此我必须找出绝对光标位置，以便我知道 DIV 应该出现在哪里。
事实证明：这是（几乎我希望）不可能实现的。有没有人有一些巧妙的想法如何解决这个问题？
在文本区域中的光标位置显示 DIV
IT技术
javascript
dom
2021-03-21 14:26:02
6个回答
我的 Hacky 实验的第 2 版
这个新版本适用于任何字体，可以按需调整，任何文本区域大小。
在注意到你们中的一些人仍在尝试让它发挥作用之后，我决定尝试一种新方法。这次我的结果要好得多 - 至少在 linux 上的 google chrome 上是这样。我不再有可用的 Windows PC，所以我只能在 Ubuntu 上的 chrome/firefox 上进行测试。我的结果在 Chrome 上 100% 始终如一地工作，假设在 Firefox 上大约 70 - 80%，但我不认为找到不一致会非常困难。
这个新版本依赖于 Canvas 对象。在我的示例中，我实际上展示了那个非常画布 - 只是为了让您可以看到它的实际效果，但是使用隐藏的画布对象可以很容易地完成。
这肯定是一个 hack，我提前为我相当混乱的代码道歉。至少，在谷歌浏览器中，无论我将其设置为什么字体或 textarea 的大小，它都能始终如一地工作。我使用Sam Saffron的示例来显示光标坐标（灰色背景 div）。我还添加了一个“随机化”链接，因此您可以看到它以不同的字体/texarea 大小和样式工作，并实时观察光标位置的更新。我建议您查看整页演示，以便您可以更好地了解配套画布的运行情况。
我将总结它是如何工作的......
潜在的想法是我们试图在画布上尽可能接近地重绘文本区域。由于浏览器对 texarea 和 texarea 使用相同的字体引擎，我们可以使用 canvas 的字体测量功能来找出事物的位置。从那里，我们可以使用我们可用的画布方法来计算我们的坐标。
首先，我们调整画布以匹配 textarea 的尺寸。这完全是出于视觉目的，因为画布大小并没有真正影响我们的结果。由于 Canvas 实际上并没有提供自动换行的方法，我不得不想出一种方法（一起偷/借/ munge）分解行以尽可能地匹配 textarea 的方法。在这里，您可能会发现需要进行最多的跨浏览器调整。
自动换行后，其他一切都是基本的数学。我们将这些行拆分成一个数组来模拟自动换行，现在我们想遍历这些行并一直向下直到我们当前选择的结束点。为了做到这一点，我们只是计算字符数，一旦我们超过了selection.end，我们就知道我们已经下降得够多了。将行数乘以行高直到该点，你就有了一个y坐标。
该x坐标非常相似，除了我们使用context.measureText。只要我们打印出正确数量的字符，这就会给我们绘制到 Canvas 的线的宽度，它恰好在写出的最后一个字符之后结束，即当前selection.end位置之前的字符。
当尝试为其他浏览器调试时，要寻找的是线路没有正确断开的地方。您会在某些地方看到画布中一行上的最后一个单词可能已覆盖在 textarea 上，反之亦然。这与浏览器如何处理自动换行有关。只要您在画布中进行包装以匹配文本区域，您的光标就应该是正确的。
我将在下面粘贴来源。您应该能够复制和粘贴它，但是如果您这样做了，我要求您下载自己的 jquery-fieldselection 副本，而不是点击我服务器上的副本。
祝你好运！
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Tooltip 2</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://enobrev.info/cursor/js/jquery-fieldselection.js"></script>
<style type="text/css">
form {
float: left;
margin: 20px;
}
#textariffic {
height: 400px;
width: 300px;
font-size: 12px;
font-family: 'Arial';
line-height: 12px;
}
#tip {
width:5px;
height:30px;
background-color: #777;
position: absolute;
z-index:10000
}
#mock-text {
float: left;
margin: 20px;
border: 1px inset #ccc;
}
/* way the hell off screen */
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
#randomize {
float: left;
display: block;
}
</style>
<script type="text/javascript">
var oCanvas;
var oTextArea;
var $oTextArea;
var iScrollWidth;
$(function() {
iScrollWidth = scrollMeasure();
oCanvas = document.getElementById('mock-text');
oTextArea = document.getElementById('textariffic');
$oTextArea = $(oTextArea);
$oTextArea
.keyup(update)
.mouseup(update)
.scroll(update);
$('#randomize').bind('click', randomize);
update();
});
function randomize() {
var aFonts = ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Impact', 'Times New Roman', 'Verdana', 'Webdings'];
var iFont = Math.floor(Math.random() * aFonts.length);
var iWidth = Math.floor(Math.random() * 500) + 300;
var iHeight = Math.floor(Math.random() * 500) + 300;
var iFontSize = Math.floor(Math.random() * 18) + 10;
var iLineHeight = Math.floor(Math.random() * 18) + 10;
var oCSS = {
'font-family': aFonts[iFont],
width: iWidth + 'px',
height: iHeight + 'px',
'font-size': iFontSize + 'px',
'line-height': iLineHeight + 'px'
};
console.log(oCSS);
$oTextArea.css(oCSS);
update();
return false;
}
function showTip(x, y) {
$('#tip').css({
left: x + 'px',
top: y + 'px'
});
}
// https://stackoverflow.com/a/11124580/14651
// https://stackoverflow.com/a/3960916/14651
function wordWrap(oContext, text, maxWidth) {
var aSplit = text.split(' ');
var aLines = [];
var sLine = "";
// Split words by newlines
var aWords = [];
for (var i in aSplit) {
var aWord = aSplit[i].split('\n');
if (aWord.length > 1) {
for (var j in aWord) {
aWords.push(aWord[j]);
aWords.push("\n");
}
aWords.pop();
} else {
aWords.push(aSplit[i]);
}
}
while (aWords.length > 0) {
var sWord = aWords[0];
if (sWord == "\n") {
aLines.push(sLine);
aWords.shift();
sLine = "";
} else {
// Break up work longer than max width
var iItemWidth = oContext.measureText(sWord).width;
if (iItemWidth > maxWidth) {
var sContinuous = '';
var iWidth = 0;
while (iWidth <= maxWidth) {
var sNextLetter = sWord.substring(0, 1);
var iNextWidth = oContext.measureText(sContinuous + sNextLetter).width;
if (iNextWidth <= maxWidth) {
sContinuous += sNextLetter;
sWord = sWord.substring(1);
}
iWidth = iNextWidth;
}
aWords.unshift(sContinuous);
}
// Extra space after word for mozilla and ie
var sWithSpace = (jQuery.browser.mozilla || jQuery.browser.msie) ? ' ' : '';
var iNewLineWidth = oContext.measureText(sLine + sWord + sWithSpace).width;
if (iNewLineWidth <= maxWidth) { // word fits on current line to add it and carry on
sLine += aWords.shift() + " ";
} else {
aLines.push(sLine);
sLine = "";
}
if (aWords.length === 0) {
aLines.push(sLine);
}
}
}
return aLines;
}
// http://davidwalsh.name/detect-scrollbar-width
function scrollMeasure() {
// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
// Delete the DIV
document.body.removeChild(scrollDiv);
return scrollbarWidth;
}
function update() {
var oPosition = $oTextArea.position();
var sContent = $oTextArea.val();
var oSelection = $oTextArea.getSelection();
oCanvas.width = $oTextArea.width();
oCanvas.height = $oTextArea.height();
var oContext = oCanvas.getContext("2d");
var sFontSize = $oTextArea.css('font-size');
var sLineHeight = $oTextArea.css('line-height');
var fontSize = parseFloat(sFontSize.replace(/[^0-9.]/g, ''));
var lineHeight = parseFloat(sLineHeight.replace(/[^0-9.]/g, ''));
var sFont = [$oTextArea.css('font-weight'), sFontSize + '/' + sLineHeight, $oTextArea.css('font-family')].join(' ');
var iSubtractScrollWidth = oTextArea.clientHeight < oTextArea.scrollHeight ? iScrollWidth : 0;
oContext.save();
oContext.clearRect(0, 0, oCanvas.width, oCanvas.height);
oContext.font = sFont;
var aLines = wordWrap(oContext, sContent, oCanvas.width - iSubtractScrollWidth);
var x = 0;
var y = 0;
var iGoal = oSelection.end;
aLines.forEach(function(sLine, i) {
if (iGoal > 0) {
oContext.fillText(sLine.substring(0, iGoal), 0, (i + 1) * lineHeight);
x = oContext.measureText(sLine.substring(0, iGoal + 1)).width;
y = i * lineHeight - oTextArea.scrollTop;
var iLineLength = sLine.length;
if (iLineLength == 0) {
iLineLength = 1;
}
iGoal -= iLineLength;
} else {
// after
}
});
oContext.restore();
showTip(oPosition.left + x, oPosition.top + y);
}
</script>
</head>
<body>
<a href="#" id="randomize">Randomize</a>
<form id="tipper">
<textarea id="textariffic">Aliquam urna. Nullam augue dolor, tincidunt condimentum, malesuada quis, ultrices at, arcu. Aliquam nunc pede, convallis auctor, sodales eget, aliquam eget, ligula. Proin nisi lacus, scelerisque nec, aliquam vel, dictum mattis, eros. Curabitur et neque. Fusce sollicitudin. Quisque at risus. Suspendisse potenti. Mauris nisi. Sed sed enim nec dui viverra congue. Phasellus velit sapien, porttitor vitae, blandit volutpat, interdum vel, enim. Cras sagittis bibendum neque. Proin eu est. Fusce arcu. Aliquam elit nisi, malesuada eget, dignissim sed, ultricies vel, purus. Maecenas accumsan diam id nisi.
Phasellus et nunc. Vivamus sem felis, dignissim non, lacinia id, accumsan quis, ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed scelerisque nulla sit amet mi. Nulla consequat, elit vitae tempus vulputate, sem libero rhoncus leo, vulputate viverra nulla purus nec turpis. Nam turpis sem, tincidunt non, congue lobortis, fermentum a, ipsum. Nulla facilisi. Aenean facilisis. Maecenas a quam eu nibh lacinia ultricies. Morbi malesuada orci quis tellus.
Sed eu leo. Donec in turpis. Donec non neque nec ante tincidunt posuere. Pellentesque blandit. Ut vehicula vestibulum risus. Maecenas commodo placerat est. Integer massa nunc, luctus at, accumsan non, pulvinar sed, odio. Pellentesque eget libero iaculis dui iaculis vehicula. Curabitur quis nulla vel felis ullamcorper varius. Sed suscipit pulvinar lectus.</textarea>
</form>
<div id="tip"></div>
<canvas id="mock-text"></canvas>
</body>
</html>
漏洞
我确实记得有一个错误。如果将光标放在一行的第一个字母之前，它会将“位置”显示为上一行的最后一个字母。这与 selection.end 的工作方式有关。我认为寻找那个案例并相应地修复它应该不会太难。
版本 1
将其留在这里，这样您就可以查看进度，而无需深入查看编辑历史记录。
它并不完美，而且绝对是一种 hack，但我让它在 WinXP IE、FF、Safari、Chrome 和 Opera 上运行良好。
据我所知，无法在任何浏览器上直接找出光标的 x/y。该IE方法，提到由亚当贝莱尔是有趣的，但不幸的是没有跨浏览器。我认为下一个最好的方法是将字符用作网格。
不幸的是，任何浏览器都没有内置字体度量信息，这意味着等宽字体是唯一具有一致度量的字体类型。此外，没有可靠的方法可以从字体高度中计算出字体宽度。起初我尝试使用高度的百分比，效果很好。然后我改变了字体大小，一切都糟透了。
我尝试了一种计算字符宽度的方法，即创建一个临时的 textarea 并不断添加字符，直到 scrollHeight（或 scrollWidth）发生变化。这似乎是合理的，但在这条路的一半左右，我意识到我可以只在 textarea 上使用 cols 属性，并认为在这个考验中有足够的 hack 来添加另一个。这意味着您不能通过 css 设置 textarea 的宽度。你必须使用 cols 才能工作。
我遇到的下一个问题是，即使您通过 css 设置字体，浏览器也会以不同的方式报告字体。当你不设置字体时，mozillamonospace默认使用Courier New, Opera "Courier New"(带引号), Safari, 'Lucida Grand'(带单引号)。当您确实将字体设置为monospace, mozilla 并即采用您提供的字体时，Safari 就会出现，-webkit-monospace而 Opera 则保留"Courier New".
所以现在我们初始化一些变量。确保也在 css 中设置你的行高。Firefox 报告正确的行高，但 IE 报告“正常”，我没有打扰其他浏览器。我只是在我的 css 中设置了行高并解决了差异。我还没有测试过使用 em 而不是像素。字符高度只是字体大小。也应该在你的 css 中预先设置。
此外，在我们开始放置角色之前还有一个预设——这真的让我摸不着头脑。对于 ie 和 mozilla，texarea 字符是 < cols，其他的都是 <= 字符。所以 Chrome 可以容纳 50 个字符，但 mozilla 和 ie 会打破最后一个字。
现在我们要为每一行创建一个第一个字符位置的数组。我们遍历 textarea 中的每个字符。如果它是一个换行符，我们将向我们的行数组添加一个新位置。如果它是一个空格，我们会尝试弄清楚当前的“单词”是否适合我们所在的行，或者它是否会被推到下一行。标点符号算作“词”的一部分。我还没有用制表符进行过测试，但是有一行可以为制表符字符添加 4 个字符。
一旦我们有了一个行位置数组，我们就会遍历并尝试找到光标所在的行。我们使用选择的“结束”作为我们的光标。
x = (光标位置 - 光标所在行的第一个字符位置) * 字符宽度
y = ((光标行 + 1) * 行高) - 滚动位置
我正在使用jquery 1.2.6、jquery-fieldselection和jquery-dimensions
演示：http : //enobrev.info/cursor/
和代码：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tooltip</title>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery-fieldselection.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<style type="text/css">
form {
margin: 20px auto;
width: 500px;
}
#textariffic {
height: 400px;
font-size: 12px;
font-family: monospace;
line-height: 15px;
}
#tip {
position: absolute;
z-index: 2;
padding: 20px;
border: 1px solid #000;
background-color: #FFF;
}
</style>
<script type="text/javascript">
$(function() {
$('textarea')
.keyup(update)
.mouseup(update)
.scroll(update);
});
function showTip(x, y) {
y = y + $('#tip').height();
$('#tip').css({
left: x + 'px',
top: y + 'px'
});
}
function update() {
var oPosition = $(this).position();
var sContent = $(this).val();
var bGTE = jQuery.browser.mozilla || jQuery.browser.msie;
if ($(this).css('font-family') == 'monospace' // mozilla
|| $(this).css('font-family') == '-webkit-monospace' // Safari
|| $(this).css('font-family') == '"Courier New"') { // Opera
var lineHeight = $(this).css('line-height').replace(/[^0-9]/g, '');
lineHeight = parseFloat(lineHeight);
var charsPerLine = this.cols;
var charWidth = parseFloat($(this).innerWidth() / charsPerLine);
var iChar = 0;
var iLines = 1;
var sWord = '';
var oSelection = $(this).getSelection();
var aLetters = sContent.split("");
var aLines = [];
for (var w in aLetters) {
if (aLetters[w] == "\n") {
iChar = 0;
aLines.push(w);
sWord = '';
} else if (aLetters[w] == " ") {
var wordLength = parseInt(sWord.length);
if ((bGTE && iChar + wordLength >= charsPerLine)
|| (!bGTE && iChar + wordLength > charsPerLine)) {
iChar = wordLength + 1;
aLines.push(w - wordLength);
} else {
iChar += wordLength + 1; // 1 more char for the space
}
sWord = '';
} else if (aLetters[w] == "\t") {
iChar += 4;
} else {
sWord += aLetters[w];
}
}
var iLine = 1;
for(var i in aLines) {
if (oSelection.end < aLines[i]) {
iLine = parseInt(i) - 1;
break;
}
}
if (iLine > -1) {
var x = parseInt(oSelection.end - aLines[iLine]) * charWidth;
} else {
var x = parseInt(oSelection.end) * charWidth;
}
var y = (iLine + 1) * lineHeight - this.scrollTop; // below line
showTip(oPosition.left + x, oPosition.top + y);
}
}
</script>
</head>
<body>
<form id="tipper">
<textarea id="textariffic" cols="50">
Aliquam urna. Nullam augue dolor, tincidunt condimentum, malesuada quis, ultrices at, arcu. Aliquam nunc pede, convallis auctor, sodales eget, aliquam eget, ligula. Proin nisi lacus, scelerisque nec, aliquam vel, dictum mattis, eros. Curabitur et neque. Fusce sollicitudin. Quisque at risus. Suspendisse potenti. Mauris nisi. Sed sed enim nec dui viverra congue. Phasellus velit sapien, porttitor vitae, blandit volutpat, interdum vel, enim. Cras sagittis bibendum neque. Proin eu est. Fusce arcu. Aliquam elit nisi, malesuada eget, dignissim sed, ultricies vel, purus. Maecenas accumsan diam id nisi.
Phasellus et nunc. Vivamus sem felis, dignissim non, lacinia id, accumsan quis, ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed scelerisque nulla sit amet mi. Nulla consequat, elit vitae tempus vulputate, sem libero rhoncus leo, vulputate viverra nulla purus nec turpis. Nam turpis sem, tincidunt non, congue lobortis, fermentum a, ipsum. Nulla facilisi. Aenean facilisis. Maecenas a quam eu nibh lacinia ultricies. Morbi malesuada orci quis tellus.
Sed eu leo. Donec in turpis. Donec non neque nec ante tincidunt posuere. Pellentesque blandit. Ut vehicula vestibulum risus. Maecenas commodo placerat est. Integer massa nunc, luctus at, accumsan non, pulvinar sed, odio. Pellentesque eget libero iaculis dui iaculis vehicula. Curabitur quis nulla vel felis ullamcorper varius. Sed suscipit pulvinar lectus.
</textarea>
</form>
<p id="tip">Here I Am!!</p>
</body>
</html>
我在俄语 JavaScript 站点上发布了与此问题相关的主题。
如果您不懂俄语，请尝试由 Google 版本翻译：http : //translate.google.ru/translate?js=y&prev=_t&hl=ru&ie=UTF-8&layout=1&eotf=1&u=http : //javascript.ru/forum /events/7771-poluchit-koordinaty-kursora-v-tekstovom-pole-v-pikselyakh.html&sl=ru&tl=en
翻译版本的代码示例中存在一些标记问题，因此您可以阅读原始俄文帖子中的代码。
这个想法很简单。没有简单、通用和跨浏览器的方法来获取以像素为单位的光标位置。坦率地说，有，但仅适用于 Internet Explorer。
在其他浏览器中，如果您确实需要计算它，则必须...
- 创建一个不可见的 DIV
- 将文本框的所有样式和内容复制到该 DIV 中
- 然后在文本中插入符号在文本框中完全相同的位置插入 HTML 元素
- 获取该 HTML 元素的坐标
我不会再解释与这些东西相关的问题，因为它们在其他帖子中有很好的解释。只是会指出一个可能的解决方案，它有一些错误，但这是一个起点。
幸运的是，Github 上有一个脚本来计算相对于它的容器的插入符号位置，但它需要 jQuery。这里的 GitHub 页面： jquery-caret-position-getter，感谢 Bevis.Zhao。
基于它，我已经实现了下一个代码：在 jsFiddle.net 中检查它的操作
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo by mjerez</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://jsfiddle.net/css/normalize.css">
<link rel="stylesheet" type="text/css" href="http://jsfiddle.net/css/result-light.css">
<script type="text/javascript" src="https://raw.github.com/beviz/jquery-caret-position-getter/master/jquery.caretposition.js"></script>
<style type="text/css">
body{position:relative;font:normal 100% Verdana, Geneva, sans-serif;padding:10px;}
.aux{background:#ccc;opacity: 0.5;width:50%;padding:5px;border:solid 1px #aaa;}
.hidden{display:none}
.show{display:block; position:absolute; top:0px; left:0px;}
</style>
<script type="text/javascript">//<![CDATA[
$(document).keypress(function(e) {
if ($(e.target).is('input, textarea')) {
var key = String.fromCharCode(e.which);
var ctrl = e.ctrlKey;
if (ctrl) {
var display = $("#autocomplete");
var editArea = $('#editArea');
var pos = editArea.getCaretPosition();
var offset = editArea.offset();
// now you can use left, top(they are relative position)
display.css({
left: offset.left + pos.left,
top: offset.top + pos.top,
color : "#449"
})
display.toggleClass("show");
return false;
}
}
});
window.onload = (function() {
$("#editArea").blur(function() {
if ($("#autocomplete").hasClass("show")) $("#autocomplete").toggleClass("show");
})
});
//]]>
</script>
</head>
<body>
<p>Click ctrl+space to while you write to diplay the autocmplete pannel.</p>
</br>
<textarea id="editArea" rows="4" cols="50"></textarea>
</br>
</br>
</br>
<div id="autocomplete" class="aux hidden ">
<ol>
<li>Option a</li>
<li>Option b</li>
<li>Option c</li>
<li>Option d</li>
</ol>
</div>
</body>
请注意，此问题与一个月前提出的问题重复，我已在此处回答。我只会在那个链接上保留答案，因为这个问题应该在几年前重复关闭。
答案副本
我已经寻找了用于meteor-autocomplete的textarea caret 坐标插件，所以我已经评估了GitHub 上的所有8 个插件。到目前为止，获胜者是来自Component 的textarea-caret-position。
特征
- 像素精度
- 没有任何依赖
- 浏览器兼容性：Chrome、Safari、Firefox（尽管有两个 错误）、IE9+；可能工作但未在 Opera、IE8 或更早版本中测试
- 支持任何字体系列和大小，以及文本转换
- 文本区域可以有任意填充或边框
- 不会被 textarea 中的水平或垂直滚动条混淆
- 支持硬回车、制表符（IE 除外）和文本中的连续空格
- 比文本区域中的列长的行上的正确位置
- 换行长单词时，行尾空白处没有“幽灵”位置
这是一个演示 - http://jsfiddle.net/dandv/aFPA7/
怎么运行的
镜子<div>是在屏幕外创建的，其样式与<textarea>. 然后，直到插入符号的 textarea 的文本被复制到 div 中，并<span>在它之后插入a 。然后，将span的文本内容设置为textarea中文本的剩余部分，以忠实地再现仿div中的换行。
这是保证处理所有与长行换行有关的边缘情况的唯一方法。GitHub 也使用它来确定其@user下拉列表的位置。