I'm looking to get the X/Y coordinates of the caret within a textarea on key down. I've searched vigorously but without any luck whatsoever, it seems you can get the position, but not the on-screen X/Y coordinates.
2 Answers
The only viable way of doing this, AFAIK:
- Append the contents of the TEXTAREA to a DIV
- Append the DIV to the DOM
- Place a SPAN inside the DIV at the character offset of the caret.
- Take the offset of the SPAN (
$(span).offset()
...) and minus the offset of the DIV (depending on whether you want the x/y coords relative to the textarea or the page)
Note: When copying the text from the TEXTAREA to the DIV, make sure to copy relevant CSS properties that may affect the offset (width, height, padding, margin, border, font-size, line-height etc.).
-
That's the general algorithm, but there are various nuances when it comes to browser compatibility. The Component.io team has put together a simple plugin that works around all edge cases, and doesn't require jQuery. Mar 17, 2014 at 12:11
I wrote this jQuery plugin for exactly that.
-
-
@WoIIe: I have a small complaint: if there's a scrollbar, the position may be off by one line. Also, the caret position can be determined more simply, and without needing jQuery. Mar 17, 2014 at 12:09
-