HTML + Javascript: Detecting where in a line of text a click occurred

Question

What's a good way to do this without wrapping each letter with <span> tags and binding onclick functions to each, or something silly like that?

Answer 1

if you use a textarea and style it to not look like one, you could do something like this: http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery

Answer 2

I don't think that's possible as each browser renders a page different on each client. As a javascript-event is always attached to some html tag (and a text it self is not a tag but the content of this tag) you can only retrieve the tag the event occures on or every parent tag. You could in some way determine the approx. position of the cursor by wrapping each paragraph or sentence with div||p||span, retrieve the position of the click event relative to the document, retrieve the position of the tag the event occures on relative to the document and calculate depending on the number of sibling tags and their heights the approx. line number.