Replace blinking text cursor with custom char

Question

I'm creating something like MySQL cmd and to have complete design, I want to replace insertion point (that blinking line) with underline sing. Any tips?

Answer 1

If you were hoping this would be easy, the bad news is that there simply isn't a quick and simple way to do this -- the text cursor is not something you can just change with a couple of lines of javascript or CSS.

If you really want to do this, you're going to need to write your own entire text input system in javascript -- display the cursor yourself, wait for key presses, print them to the screen, handle anything like word-wrapping manually.... it's a fair bit of work.

Fortunately, others have already done this work and made it available to share, so I suggest your best starting point would be to take a look at some existing examples and see how they've done it.

Here's one I found with a quick bit of googling: http://terminal.jcubic.pl/. There are plenty of others you could try as well though.

Hope that helps.

Answer 2

This is what you need to do.

• Make input text field invisible, so usable but invisible.
• copy its content
• render it to another div.
• and and add a custom box or whatever...

Styling text input caret

Hide textfield blinking cursor