Simulate a flashing text cursor in HTML

Viewed 8971

What's a good way to insert a flashing cursor (e.g. a flashing thick underscore in DOS or vertical bar in Linux) in HTML?

This character/image would be trailing the H1 header and should look good at different sizes.

3 Answers

You can't do this using couple of code There's no library to do this. You can make a fake cursor using js.

step 1

Hide the main cursosr by,

caret-color: transparent;

step 2

create a span element

<input type="text"><span id="fake">_</span>

step 3

Make the span element blink using js

What about just using the contenteditable property on the HTML element?

It will only work when the user clicks in the element but then it works "for free" without any JS or CSS etc.

Example:

<h1 contenteditable="true">Edit me</h1>

Related