Draw virtual (fake) carret in HTML / Javascript / CSS

Question

I want to draw a caret in a div (not a text area, neither a contenteditable). I know exactly the position where the caret must be drawn (between two characters). I through inserting this character |, but of course, it shifts the characters, like this:

my text ...
my |text ...

And of course, my character-caret do not blink.

I read carefully the following question, but it's more about general libraries for simulating alternative or multiples carets.

How to simulate an artificial caret in a textarea?

My concern is more about displaying the blicking caret without changing the content. I sense it is feasible with some css tricks, but I don't know where to start.

Spieler

maybe have a span width the following css: display: inline-block; width: 1px; height: 1em; background: black; margin-left: -1px. You would have to do an animation for blinking, but this should to the trick – Laminar

Answer 1

This codepen looks like exactly what you need:

https://codepen.io/ArtemGordinsky/pen/GnLBq

.blinking-cursor {

  margin-right:-.1em;
  margin-left:-.1em;
  font-weight: 100;
  font-size: 30px;
  color: #2E3D48;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-moz-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-webkit-keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-ms-keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-o-keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

  The word is no lon<span class="blinking-cursor">|</span>ger split!

Macilroy

Your answer helps, tahnk you. But the caret still take the space of one character. Can't we draw the caret over the text, not inside? This CodePen shows the remaining problem : codepen.io/imabot2/pen/eYpOZeo – Spieler

I added margin-right:-.1em; margin-left:-.1em; to the .blinking-cursor class and it seems like that solved the issue. – Macilroy

Answer 2

Solution 1

Absolutely position the caret should you need to show it over or under the text line.

.parent-container {
  position: relative;
}

#caret {
  display: inline-block;
  animation: blink 1s linear infinite;
  position: absolute;
  /* Change top to change the vertical position of the caret */
  top: -5px;
  margin: 0 5px;
  font-size: 25px;
}

@keyframes blink {
  0% {
    color: #fff;
  }
  100% {
    color: #000;
  }
}

<div class="parent-container">
  Lorem ipsum <span id="caret">|</span> dolor sit amet consectetur adipisicing elit. Tempore dicta quod deleniti nemo iure aliquam et. Hic error illum cumque nobis eum et saepe esse, ut cum, magnam aliquam velit.
</div>

Solution 2

Use css pseudo class ::after and absolutely position it.

#caret {
  position: relative;
}

#caret::after {
  content: "|";
  display: inline-block;
  animation: blink 1s linear infinite;
  font-size: 25px;
  position: absolute;
  top: -5px;
  left: -2px;
}

@keyframes blink {
  0% {
    color: #fff;
  }
  100% {
    color: #000;
  }
}

<div class="parent-container">
  Lorem ipsum do<span id="caret"></span>lor sit amet consectetur adipisicing elit. Tempore dicta quod deleniti nemo iure aliquam et. Hic error illum cumque nobis eum et saepe esse, ut cum, magnam aliquam velit.
</div>

However, I recommend to use a fixed size asset: either img or svg for caret.

Bonnie