javascript 以像素为单位在 textarea 中查找插入符号位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9012835/
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
Find caret position in textarea in pixels
提问by JustinPGriffen
I was wondering if it is possible to find the exact location of the carret inside a textarea in pixels in relation to the entire page. For instance, if I have typed This is textinto my text box, I would like to know the pixes from the top left of the screen to the carot.
我想知道是否有可能在 textarea 中找到与整个页面相关的 carret 的确切位置（以像素为单位）。例如，如果我在This is text文本框中输入内容，我想知道从屏幕左上角到胡萝卜的像素。
It would be in the form X: 200 Y: 100. This is so I can position a floating div. This needs to be done dynamically in javascript.
它将采用 X: 200 Y: 100 的形式。这样我就可以定位一个浮动的 div。这需要在javascript 中动态完成。
Thanks guys
多谢你们
采纳答案by Teemu
This "raw code" works at least in IE.
这个“原始代码”至少在 IE 中有效。
Using the code you can put your <TEXTAREA>where ever you want in page, and the <DIV id="db">will follow it. Even despite of the scrolling position of the page. You can fix the position of <DIV>by changing the literal numbers at d.style...6-statements.
使用代码，您可以将您<TEXTAREA>想要的任何位置放在页面中，并且<DIV id="db">会跟随它。即使页面的滚动位置。您可以<DIV>通过更改d.style...6-statements 中的文字数字来修复 的位置。
<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>
Positioning of the <DIV>is not quite exact, but gets better when using fixed-width font in <TEXTAREA>.
的定位<DIV>不是很准确，但在<TEXTAREA>.
回答by Bevis.Zhao
There is an implemention: https://github.com/beviz/jquery-caret-position-getter, it can gets caret position in textarea(i.e.x,y)
有一个实现：https://github.com/beviz/jquery-caret-position-getter，它可以在textarea(iex,y) 中获取插入符位置
回答by Javier Brooklyn
Here is a simple mix of ideas from Caret position in pixels in an input type text (not a textarea), Caret position in textarea, in characters from the startand document.getElementById vs jQuery $()to get the caret position in jQuery for an <input>element. It works when clicking inside it, but not when moving the caret using the arrows or typing.
这是一个简单的想法组合，从输入类型文本（不是文本区域）中的插入符号位置（而不是文本区域）中的像素位置、文本区域中的插入符号位置、起始字符中的字符和document.getElementById 与 jQuery $()来获取 jQuery 中的插入符号位置一个<input>元素。它在内部单击时有效，但在使用箭头或键入移动插入符号时无效。
<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>
Instead of var inputter = document.getElementById('someid')we use var inputter = $('#someid')[0];
而不是var inputter = document.getElementById('someid')我们使用var inputter = $('#someid')[0];
Here is a FIDDLE.
这是一个FIDDLE。
回答by ron tornambe
Here's a plug-in for this: jQuery caret plugin
这是一个插件：jQuery caret plugin
