Showing a cursor inside a DIV

Question

I'm trying to make a fancy editor online, and I need to give the user the impression that he's typing directly inside a DIV / SPAN / some other element.

I can capture the keystrokes by routing them to a hidden text box, yes, but I want to know how to show a cursor at the right places to complete the illusion.

Any ideas?

Answer 1

#editor {cursor:text;}

(think it's "text" the cursor you want)

Answer 2

I believe that most of the in-browser rich text editors achieve this by using the contentEditable property (there's different names for each browser I think), so it lets the system handle that. It's a much cleaner solution since all the native commands and shortcuts (ctrl+left, double-click to select word, etc) work exactly the same as they'd expect and you don't have to do anything.

If there's a really good reason you want to go with this other way, I guess you could fudge it by using an animated gif and just shifting it with each keystroke. Unless they're using monospace font, finding where to place the cursor will be difficult...