views:

76

answers:

1

I know the mouse can be located by position with the event.clientX and event.clientY features but is there any way to tell which character # of the document the curser is on?

+2  A: 

If you can deal with the potential performance issues and complications around font-sizing, styling, and width of the areas:

  1. Find the smallest element containing text.
  2. Render another copy of the element off-screen (absolute position, way up and left?)
  3. Measure the off-screen element's height and width.
  4. Remove characters until one line is gone.
  5. Remember which character started the line.
  6. If the new height of the element is no longer tall enough to cover the y-coordinate translation, then you just got rid of the line that the mouse was over.
  7. Add characters from the correct line, one at a time.
  8. Measure the width of the off-screen element.
  9. When the translated x-coordinate finally fits in the element, you found the character!

Warning! This method could become quite difficult inside a complicated page, or in a place where you don't know all the details of the html structure around the text you're examining.

John Fisher