Get caret XY coordinates in text area

javascript jquery html textarea caret
orshachar picture orshachar · Feb 22, 2011 · Viewed 18.8k times · Source

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!

Answer

Valentin Kantor picture Valentin Kantor · Feb 23, 2011

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

Related questions

Rendering HTML inside textarea

I need to be able to render some HTML tags inside a textarea (namely <strong>, <i>, <u>, <a>) but textareas only interpret their content as text. Is there an easy way of …

Read More
Get value from text area

How to get value from the textarea field when it's not equal "". I tried this code, but when I enter text into textarea the alert() isn't works. How to fix it? <textarea name="textarea" placeholder="Enter the text...">&…

Read More
How to read line by line of a text area HTML tag

I have a text area where each line contains Integer value like follows 1234 4321 123445 I want to check if the user has really enetered valid values and not some funny values like follows 1234, 987l; For that I need to read line …

Read More