Нарисуйте виртуальную (фальшивую) каррету в HTML / Javascript / CSS - PullRequest
Новая
       10

Нарисуйте виртуальную (фальшивую) каррету в HTML / Javascript / CSS

2 голосов
/ 07 апреля 2020

Я хочу нарисовать каретку в элементе div (не в текстовой области и не в contenteditable). Я точно знаю позицию, где должна быть нарисована каретка (между двумя символами). Я через вставку этого символа |, но, конечно, он сдвигает символы, как это: 

my text ...
my |text ...

И, конечно, моя символьная каретка не мигает.

Я внимательно прочитал следующий вопрос, но он больше касается общих библиотек для моделирования альтернативных или кратных карет.

Как смоделировать искусственную карету в текстовой области?

Больше всего меня интересует отображение каретки для переноса без изменения содержимого. Я чувствую, что это возможно с некоторыми css трюками, но я не знаю, с чего начать.

Ответы [ 2 ]

3 голосов
/ 08 апреля 2020

Решение 1

Абсолютно расположите каретку, если вам нужно показать ее над или под текстовой строкой. 

.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>

Решение 2

Используйте css псевдо-класс :: после и абсолютно поместите его. 

#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>

Однако я рекомендую использовать актив фиксированного размера: либо img, либо svg для каретки.

3 голосов
/ 07 апреля 2020

Этот кодекс выглядит именно так, как вам нужно:

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!
...