在textarea中以像素为单位查找插入位置

Question

在textarea中以像素为单位查找插入位置

Jus*_*fen 11 html javascript textarea position cursor

我想知道是否有可能在整个页面中找到textarea中的carret的确切位置(以像素为单位).例如,如果我输入This is text了我的文本框,我想知道从屏幕左上角到carot的像素.

它将采用X:200 Y:100的形式.这样我就可以定位浮动div.这需要在javascript中动态完成.

多谢你们

Answer 1

Tee*_*emu 3

这个“原始代码”至少可以在 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>

Run Code Online (Sandbox Code Playgroud)

的定位<DIV>并不十分精确，但在<TEXTAREA>.

归档时间：	13 年，9 月前
查看次数：	10602 次
最近记录：	11 年，7 月前