jQuery get textarea cursor/caret X,Y position and

Question

I am trying to implement something like the "Change/Remove Link" in Gmail/Google Docs richtext WYSIWYG edtior, when you type a URL, a div shows underneath it says "Goto Link, Change, Remote"

How could I write something like that using jQuery?

1. How to get row and column of cursor?
2. how can I calculate font width and height (especially non-fixed width font with some Bold/Italic style)
3. How to make sure the DIV appears at the start of a word?

Thank you in advance!

Answer 1

Answer: http://jsfiddle.net/morrison/57BR3/

What it does:

• Creates div positioned near hyperlink.
• Looks like Google docs box.
• Ability to change text and url.
• Remove is implemented.

What it does not do:

• Work on textarea. Textareas don't support html as they are plain text. This is a complex process to work-around. Find a library, then implement my answer.
• Open when your cursor gets moved onto it by arrowkeys. Doesn't work because of above item.

Answer 2

You're suggesting you're building a WYSIWYG editor. Are you sure you want to use a textarea? Textareas don't support HTML. To answer your later comment, the best way to get the (x, y) position of the caret in a text area is to use the textarea-caret-position plugin.