我想知道是否有可能在整个页面中找到textarea内像素的确切位置。例如,如果我在文本框中键入This is text
,我想知道从屏幕左上角到卡罗的像素。以像素为单位在textarea中查找插入位置
它将以X:200 Y:100的形式出现。这样我可以定位一个浮动div。这需要在javascript中动态地完成。
谢谢你们
我想知道是否有可能在整个页面中找到textarea内像素的确切位置。例如,如果我在文本框中键入This is text
,我想知道从屏幕左上角到卡罗的像素。以像素为单位在textarea中查找插入位置
它将以X:200 Y:100的形式出现。这样我可以定位一个浮动div。这需要在javascript中动态地完成。
谢谢你们
这种“原始代码”的作品,至少在IE中。
使用代码,你可以把你的<TEXTAREA>
放在任何你想要的页面上,<DIV id="db">
会跟着它。即使页面滚动的位置。您可以修改<DIV>
的位置,方法是更改文字编号d.style...6
-语句。
<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>
固定宽度字体时变得更好。
这里有一个插件,这样:jQuery caret plugin
该插件与插入符的位置相对于输入字段中的字符一起工作; OP正在寻找插入符的屏幕(即x,y)位置。 –
难道你不赞成反对吗?请解释! –
恩,downvote是有几个原因的,但请不要亲自采取 - 如果答案得到肯定更新,我很快就会撤销downvote。 A)这是一个只有链接的答案,[不鼓励](http://meta.stackexchange.com/questions/8231),B)插件可以帮助OP的努力,它是目的是在输入中设置和查找特定字符之间的插入符号,这不是OP在这种情况下的意思。 –
有系统的实现:https://github.com/beviz/jquery-caret-position-getter,它可以获取textarea的(IEX,y)的插入位置
我已将链接更改为Github。 –
有没有机会不依赖于jQuery? [使用jQuery 1.9。*的插件时遇到了问题,它可以摆脱'$ .browser'](https://github.com/beviz/jquery-caret-position-getter/issues/5)。 –
这里是思想的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 $()一个简单的组合,以获取插入符位置的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>
而不是var inputter = document.getElementById('someid')
我们使用var inputter = $('#someid')[0];
这里是一个FIDDLE。
约'42'小精灵。 – alex
感谢您的澄清好友:P – alex
您可能有兴趣[任何数量的这些问题](http://stackoverflow.com/search?q=caret+javascript+position+x+y)。 –