Replace blinking text cursor with custom char

Question

I am creating something like MySQL cmd and have a complete design, I want to replace the insertion point (this blinking line) with an underline of singing. Any tips?

Answer 1

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

If you really want to do this, you will need to write your own text input system in javascript - display the cursor yourself, wait for the keys to be pressed, print them on the screen, process something like a word-wrap manually ... this is a fair job.

Fortunately, others have already done this work and made it available for sharing, so I suggest that your best starting point is to look at some existing examples and see how they did it.

Here I found with a quick search: http://terminal.jcubic.pl/ . There are many others that you could try, though.

Hope this helps.

Answer 2

This is what you need to do.

• Make the input text box invisible, so you can use it, but invisibly.
• copy its contents
• pass it to another div.
• and add a custom flag or something else ...

Text input template <

Hide text box, blinking cursor

Answer 3

What about:

textarea{ cursor:url(underlineimage.png),auto; } 

Replace textarea with any element you want to change the cursor to. You will need to create your own image of what you want your cursor to look like.