update ：get cursor或文本位置在像素中以输入元素为单位。
TL;DR - 使用令人难以置信的轻巧且健壮的Textarea-Caret-position-position 组件库，现在也支持<input ype="text">。演示，http://jsfiddle.net/dandv/afpa7/
有没有办法知道Caret在HTML文本字段中的位置？
<input type='text' />
我想在像素（和重新定位）中定位一个DIV，具体取决于钟表的位置。
注释：我不想知道字符或
<textarea>中的位置。我想知道<input>元素中的像素中的位置。
使用隐形人造元素
您可以使用绝对定位的不可见（使用visibility不是display）的人造元素来实现此目标，该元素具有与输入文本框相同的所有CSS属性（字体，左边框和左填充）。
这个非常简短且易于理解的JSfiddle是该脚本应该如何工作的起点。 Internet Explorer 8（及向下）将需要一些其他代码来从输入文本框中的文本开始获得插入位置。我什至在顶部添加了一个仪表，每10个像素显示一条线，以便您可以查看它是否正确测量。请注意，线在1、11、21，...像素位置。 这个示例实际上将文本框中的所有文本都带到了caret位置，并将其放在人造元素中，然后在像素中测量其宽度。这使您从文本框的左侧偏移。 当它将文本复制到人造元素时，它还用非破坏空间替换了普通空间，因此实际上会渲染它们，否则如果您在空间之后立即定位caret，则会遇到错误的位置： 注意到人造的右尺寸 已被删除以获取正确的值，否则元素将太宽。元素的框必须在包含文本后立即结束。
它在Chrome和Firefox中工作。var faux = $("#faux");
$("#test").on("keyup click focus", function(evt) {
// get caret offset from start
var off = this.selectionStart;
// replace spaces with non-breaking space
faux.text(this.value.substring(0, off).replace(/s/g, "u00a0"));
});
faux.outerWidth();
问题
虽然有一个问题。当文本框中的文本滚动（时间太长）和Caret不是在文本的末尾，而是在介于两者之间的某个地方，我不确定如何处理情况...可能的最大位置（输入宽度较小尺寸 - 填充，边框，边框）。
我不确定是否可以在文本框中获得文本滚动位置？如果可以的话，即使可以解决此问题。但是我不知道对此有任何解决方案...
希望这会有所帮助。
在上面的评论中详细说明，我想以下内容应该有效。
要显示我省略格式的原理，因此可能需要将元素（id =" spacer"）颜色设置为 #FFFFFE，也许添加了一些领先空间等像素等等...但是卡雷特现在将成比例地移动 - ID的测试和垫片使用相同的字体。
当然我们不知道 [px] 的距离在这种情况下）完全符合比例字体的宽度，因此，如果这是最终目标（如 op line 3 中提到的），那么....lá！
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function adjust()
{
document.getElementById('spacer').innerHTML=document.getElementById('test').value;
}
</script>
<p>
<input name="test" id="test" type="text" onkeyup="adjust()" /> Test <br />
<span id="spacer"></span>^here
</p>
</body>
</html>
更新：
<span id="spacer" style="color: #FFFFFF"></span>
这将使间隔器在白色背景上不可见，但尚未通过选择跨度元素来防止用户突出显示垫片文本。留下使垫片无法选择的任务 - 这里有一个很好的解决方案
您可以使用<span contenteditable="true"></span><input type="hidden" />。这样，您可以将window.getSelection()与getRangeAt和getClientRects一起使用。这应该与大多数现代浏览器一起使用，包括IE9 ：
function getCaret() {
var caret = caret = {top: 0, height: 0},
sel = window.getSelection();
caret.top = 0;
caret.height = 0;
if(sel.rangeCount) {
var range = sel.getRangeAt(0);
var rects = range.getClientRects();
if (rects.length > 0) {
caret.top = rects[0].top;
caret.height = rects[0].height;
} else {
caret.top = range.startContainer.offsetTop - document.body.scrollTop;
caret.height = range.startContainer.clientHeight;
}
}
return caret;
}
（请记住，我从中提取的项目是针对移动野生动物园，并使用一个大型可满足视图。您可能需要调整它以满足您的需求。它更多的是用于演示目的，如何获得X和Y坐标。）
对于IE8及以下IE具有可获取相同信息的专有API。
棘手的部分是确保您的元素仅允许纯文本。特别是粘贴事件。当跨度范围焦点（Onblur）时，您想将内容复制到隐藏字段中。/p>
- 在Pixels中查找文本中心的角色
- 在输入元素中获取光标或文本位置
- 如何在具有满足性的iframe中从当前的角色位置获得像素偏移
帆布2D呢？它具有用于绘制测量文本的API。您可以使用它。设置相同的字体，字体大小，您应该能够从文本框中测量字符串的宽度。
$('body').append('<canvas id="textCanvas" width="100px" height="100px">I'm sorry your browser does not support the HTML5 canvas element.</canvas>');
var canvas = document.getElementById('textCanvas');
var ctx = canvas.getContext('2d');
ctx.measureText(text);
var width = mes.width;
我使用这种解决方案来获取某些文本的宽度将其绘制在WebGL中。我的工作正常，但是我从未对此进行过测试，因为文本对画布上下文的大而言会发生什么，以为我认为这会很好，因为它是测量文本的API。但是何知道您应该完全检查一下！：）
http://jsfiddle.net/gpl3f/2/
为了找到嘉特的位置，我计算了输入中的字母，并将该值乘以1个字母的大小。
之后将DIV移至该位置。
<html>
<head>
<style type="text/css">
body { font-size: 12px; line-height: 12px; font-family: arial;}
#box { width: 100px; height: 15px; position: absolute; top: 35px; left: 0px; background: pink;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var letter_size = 6;
$("input[type='text']").keyup(function(e) {
move_size = $(this).val().length * letter_size;
$('#box').css({'left': move_size+'px'});
});
});
</script>
</head>
<body>
<input type="text" />
<div id="box">
/ move
</div>
</body>
<html>
更新
$(document).ready(function(){
var letter_size = 6;
$("input[type='text']").keyup(function(e) {
$('.hidden_for_width').text($(this).val());
move_size = $('.hidden_for_width').width();
$('#box').css({'left': move_size});
});
});
在Wich中添加了一个隐藏的容器，我将值从输入中插入。之后，我得到该容器的宽度，并相应地移动我的Div
function getCursorPosition (elem) {
var pos = 0;
if (document.selection) {
elem.focus ();
var sele = document.selection.createRange();
sele.moveStart('character', -elem.value.length);
pos = sele.text.length;
}
else if (elem.selectionStart || elem.selectionStart == '0')
pos = elem.selectionStart;
return pos;
}
getCursorPosition(document.getElementById('textbox1'))