Find caret position in textarea in pixels [duplicate]

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 text into my text box, I would like to know the pixes from the top left of the screen to the carot.

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



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

<div id="db" style="position:absolute;left:-20px;top:-20px;border:1px solid red;">V</div>
<form id="props">
<textarea id="ta" style="width:200px;height:100px;" onkeyup="moveDiv();"></textarea>

var b=document.body;
var d=document.getElementById('db');
var a=document.getElementById('ta');

function moveDiv(){
    var sel=document.selection;
    var targ=sel.createRange();;;
// -->

Positioning of the <DIV> is not quite exact, but gets better when using fixed-width font in <TEXTAREA>.


There is an implemention:, it can gets caret position in textarea(i.e.x,y)


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

<input id="someid">
<span id="faux" style="display:none"></span><br/>

var inputter = $('#someid')[0];
var faux = $('#faux');

function getCaret(el) { 
    if (el.selectionStart) { 
        return el.selectionStart; 
    } else if (document.selection) { 

        var r = document.selection.createRange(); 
        if (r == null) { 
            return 0; 

        var re = el.createTextRange(), 
            rc = re.duplicate(); 
        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");


Instead of var inputter = document.getElementById('someid') we use var inputter = $('#someid')[0];

Here is a FIDDLE.


Here's a plug-in for this: jQuery caret plugin


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.