CODEWITHSUNDEEP
javascriptcss
Anagmate
Anagmate

Reputation: 1893

Replace blinking text cursor with custom char

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?

Upvotes: 5

Views: 4931

Answers (3)

Muhammad Umer
Muhammad Umer

Reputation: 2308

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

Upvotes: 2

Spudley
Spudley

Reputation: 168655

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.

Upvotes: 5

Praxis Ashelin
Praxis Ashelin

Reputation: 5217

How about:

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

Replace textarea with whatever element you want the cursor to be changed on. You will need to create a custom image of what you want your cursor to look like.

Upvotes: -1

Related Questions