Search code examples
javascripthtmlpositiontextareatext-cursor

Find caret position in textarea in pixels

I was wondering if it is possible to find the exact location of the caret inside a textarea in pixels in relation to the entire page. For instance, if I have typed This is text into my text box, I would like to know the pixels from the top left of the screen to the caret.

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.

Thanks guys

Solution

  • This "raw code" works at least in 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.

    <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>.