How to determine row/column of mouseclick in textarea

[James Black]

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.

 

[impaler]

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.

 

[Thomas 'PointedEars' Lahn]

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

 

[James Black]

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.

 

[Thomas 'PointedEars' Lahn]

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

 

[James Black]

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.