current x,y coordinates of cursor in text area using javascript

Question

How can i get current x & y position of my CURSOR within a text area using javascript. The event is a Keyup event, not a mouse event.

I am not looking for the current cursor position in terms of charecter but x , y coordinates.

Answer 1

Give this a shot:

 $(document).ready(function(){
    $('textarea').bind('keyup', function(e){
      var $this = $(this);
      alert('X: ' + $this.data('mousepos').x + '\nY: ' + $this.data('mousepos').y);
    });

    $('textarea').bind('mousemove', function(e){
      $(e.target).data('mousepos', {x: e.pageX, y: e.pageY});
    });
 });​

workin example: http://jsbin.com/ibowa3/edit

Answer 2

The only somewhat reliable method I can think of is this:

1. Create a <span> offscreen (absolutely positioned way to the left)
2. Give it the same font characteristics as the input element.
3. Continuously populate it with the text from the input element but before the caret
4. Use a javascript library to find the pixel width of the offscreen span
5. Use that to determine where the caret is relative to the left side of the input element.

Give it a shot, I'd love to hear how it turns out.