Get caret position in x and y coordinates in javascript

Question

I am trying to find the current caret position (the blinking |) in x and y coordinates. Does anyone have a way of doing this? I really don't know where to get started.

I know this is possible in javascript, as there is a glitchy jQuery plugin for it, but I want to do it without jQuery.

More specifically, I am interested in mimicking the way Google Instant displays the #1 selection as grey text. I plan on doing this for both textfields and textareas by retrieving the caret position (like I mentioned above), then placing the text using absolute positioning. If someone has a better way to do it, let me know.

Thanks!

Answer 1

I would say that you're better off putting the entire guessed string (including the text typed so far) as a background label div and make the input box transparent.

Positioning the input box and the div ought to be trivial. That way, you can make the label gray and it'll give the same effect.

Would that work?

EDIT: checked what google instant does. They have two input boxes positioned on top of each other and the guess is populated in the background input

Answer 2

You need to watch out for mouse move events and get the coordinates from the move.