How to determine row/column of mouseclick in textarea

Discussion in 'Javascript' started by James Black, Jan 16, 2006.

  1. James Black

    James Black Guest

    I am tracking the mouse movements in the textarea, but it gives me
    mouse coordinates.

    I use this code, for the moment, to get the mouse coordinates:
    xcoord = e.pageX - e.target.offsetLeft;
    ycoord = e.pageY - e.target.offsetTop;


    I want it to be relative to the text area, not to the screen, which is
    why I do the subtraction.

    I am using FF1.5 for my testing, at the moment.

    How do I determine the row/col?

    Thank you.
     
    James Black, Jan 16, 2006
    #1
    1. Advertising

  2. James Black

    impaler Guest

    The text area might be styled. You have to extract all the data (font
    type, width, spacing etc) and do some nasty calculus. If it's not a
    fixed font, you might not even succeed. Perhaps I'm wrong but it's
    scary anyhow :) Hey, but nothing is impossible.
     
    impaler, Jan 16, 2006
    #2
    1. Advertising

  3. James Black wrote:

    > I am tracking the mouse movements in the textarea, but it gives me
    > mouse coordinates.


    "But"?

    > I use this code, for the moment, to get the mouse coordinates:
    > xcoord = e.pageX - e.target.offsetLeft;
    > ycoord = e.pageY - e.target.offsetTop;


    You have to take the offsetLeft and offsetTop of the target's parent
    and its ancestors into account.

    > I am using FF1.5 for my testing, at the moment.
    >
    > How do I determine the row/col?


    You cannot, since you cannot know the font actually used.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Jan 16, 2006
    #3
  4. James Black

    James Black Guest

    I will modify the code to take into account the target's parents, etc,
    into account.

    I will also see about using a fixed font and see if I can do some math
    to figure it out.

    Thanx.
     
    James Black, Jan 17, 2006
    #4
  5. James Black wrote:

    > [...]
    > I will also see about using a fixed font and see if I can do some math
    > to figure it out.


    As I said, the attempt is futile. Even if you say that a specific font
    should be used, if that font is not available a compliant UA will choose
    but a similar one or a default font if no similar font is available. And
    there is display zoom, font zoom etc.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Jan 17, 2006
    #5
  6. James Black

    James Black Guest

    I have a method that appears to work, but needs more testing:

    charHeight = elem.clientHeight / elem.rows;
    charWidth = elem.clientWidth / elem.cols;

    elem was initialized by getting the textarea element.

    var col = parseInt(xcoord / charWidth);
    var row = parseInt(ycoord / charHeight);

    The xcoord and ycoord is the x and y coordinates relative to the
    textarea.

    I am trying to determine which word was clicked on, which is why I need
    the col/row, so I am not looking for perfection, but for extremely
    close.
     
    James Black, Jan 17, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. watzlaw wutz
    Replies:
    2
    Views:
    810
    Pasturel
    May 11, 2004
  2. jediknight

    Catching MouseClick events

    jediknight, Jul 4, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    358
    Hans Kesting
    Jul 4, 2006
  3. KNS

    winapi: mouseclick

    KNS, Jan 26, 2004, in forum: Python
    Replies:
    1
    Views:
    393
  4. Tim Golden

    RE: winapi: mouseclick

    Tim Golden, Jan 27, 2004, in forum: Python
    Replies:
    1
    Views:
    456
  5. Tim Golden

    RE: winapi: mouseclick

    Tim Golden, Jan 27, 2004, in forum: Python
    Replies:
    0
    Views:
    390
    Tim Golden
    Jan 27, 2004
Loading...

Share This Page