Get caret XY coordinates in text area

Question

Is there any good JQuery/JS solution to get the absolute position of a caret in text area (given in X/Y coordinates OR top/left coordinates).
The native Event object of keyDown JQuery function gives the x/y coordinates of the cursor and I want something similar the works on the working caret.

My goal is to add a floating HTML element the will be positioned relatively to the working caret position so I need to somehow get its position.

I need the solution to work on TextArea elements but a general solution to any editable html element would be even better!

u cnt but there is something that gives u the number of characters to the left — Val, Feb 22 '11 at 19:32
@OrShachar: Have you used the plugin mentioned in the answer below? has it worked for all the editable controls in html? — Savaratkar, Feb 14 '16 at 08:29
Unfortunately it was so long ago that I don't remember .But from my reaction it seems like it did. — orshachar, Feb 28 '16 at 14:35

score 6 · Answer 1 · answered Feb 23 '11 at 17:43

6

may be you want replace <textarea> with <div contenteditable="true">, it has almost the same behavior, and you can get coordinates by conventional way.

answered Feb 23 '11 at 17:43

Valentin Kantor

1,799
1
23
27

1

Thanks ! My even more general idea is to create a Chrome extension that works to every content editable element in the page so I have to know all the ways to do it. What is the conventional way to do it with div? – orshachar Feb 23 '11 at 20:20
that's only one crossbrowser way i know, may be chrome has something special, i don't know. – Valentin Kantor Feb 24 '11 at 15:29
@ValentinKantor What is the way? I am looking for that now. – Cris Stringfellow Mar 07 '13 at 12:04
@CrisStringfellow add the `contenteditable="true"` to your div – Valentin Kantor Mar 07 '13 at 12:29
6

@ValentinKantor Thanks. And then grab the x,y offset of a zero-width unicode character wrapped in a span inserted at the caret position. – Cris Stringfellow Mar 07 '13 at 12:53
@CrisStringfellow nice logic :) – Mr_Green Apr 25 '13 at 06:23
@CrisStringfellow how do you find the zero-width unicode character wrapped in a span? I've tried to print out contenteditable divs content, but it does not show the caret. – Waltari Dec 13 '16 at 07:32

Get caret XY coordinates in text area

1 Answers1

Linked