Draw virtual (fake) carret in HTMLJavascriptCSS - Stack Overflow

admin管理员组

文章数量:1398322

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.

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.

• javascript
• html
• css
• caret

Share Improve this question Follow asked Apr 7, 2020 at 20:25 FifiFifi 3,61533 gold badges3131 silver badges6262 bronze badges 1

• 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 – Chrisstar Commented Apr 7, 2020 at 20:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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!

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 remend to use a fixed size asset: either img or svg for caret.

本文标签： Draw virtual (fake) carret in HTMLJavascriptCSSStack Overflow