以像素为单位在textarea中查找插入符号位置[重复]
Posted
技术标签:
【中文标题】以像素为单位在textarea中查找插入符号位置[重复]【英文标题】：Find caret position in textarea in pixels [duplicate] 【发布时间】：2012-02-19 05:37:46 【问题描述】：我想知道是否有可能找到文本区域内插入符号相对于整个页面的确切位置（以像素为单位）。例如，如果我在文本框中输入了This is text，我想知道从屏幕左上角到插入符号的像素。
它将采用 X:200 Y:100 的形式。这样我就可以定位一个浮动 div。这需要在 javascript 中动态完成。
谢谢大家
【问题讨论】：
你可能对any number of these questions感兴趣。 【参考方案1】：这种“原始代码”至少在 IE 中有效。
使用代码，您可以将<TEXTAREA> 放在页面中您想要的任何位置，<DIV id="db"> 将跟随它。即使页面的滚动位置。您可以通过更改d.style...6-statements 处的文字数字来修复<DIV> 的位置。
<body>
<div id="db" style="position:absolute;left:-20px;top:-20px;border:1px solid red;">V</div>
<br><br><br>
<form id="props">
<textarea id="ta" style="width:200px;height:100px;" onkeyup="moveDiv();"></textarea>
</form>
<script>
<!--
var b=document.body;
var d=document.getElementById('db');
var a=document.getElementById('ta');
function moveDiv()
var sel=document.selection;
var targ=sel.createRange();
d.style.top=a.offsetTop+a.clientTop-d.clientHeight-6;
d.style.left=targ.offsetLeft+b.scrollLeft-6;
return;
// -->
</script>
</body>
<DIV> 的位置不太准确，但在<TEXTAREA> 中使用固定宽度字体时会更好。
【讨论】：
【参考方案2】：这里是来自Caret position in pixels in an input type text (not a textarea)、Caret position in textarea, in characters from the start 和document.getElementById vs jQuery $() 的想法的简单组合，用于获取<input> 元素在jQuery 中的插入符号位置。在其中单击时它可以工作，但在使用箭头或键入移动插入符号时不起作用。
<input id="someid">
<span id="faux" style="display:none"></span><br/>
<script>
var inputter = $('#someid')[0];
var faux = $('#faux');
function getCaret(el)
if (el.selectionStart)
return el.selectionStart;
else if (document.selection)
el.focus();
var r = document.selection.createRange();
if (r == null)
return 0;
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
return 0;
$("#someid").click( function( event )
caretpos = getCaret(inputter);
calcfaux = faux.text($(this).val().substring(0, caretpos));
fauxpos = calcfaux.outerWidth();
$("#getpx").text(fauxpos + " px");
);
</script>
我们使用var inputter = $('#someid')[0];而不是var inputter = document.getElementById('someid')
这是一个FIDDLE。
【讨论】：
以上是关于以像素为单位在textarea中查找插入符号位置[重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JavaScript 查找 INPUT 和 TEXTAREA 插入符号位置坐标？
在 Angular 中的 TextArea 内的当前（或最后一个）插入符号位置插入文本；元素不被解释为 TextArea