Как сделать курсор перед печатающиймся текстом?

Question

Подскажите пожалуйста как сделать так, что-бы когда текст набирался перед ним был курсор? и когда текст закончился курсор пропал? Спасибо

function writeTextByJS(id, text, speed) {

    const ele = document.querySelector('.main-home__subtitle');
    const txt = text.join("").split("");

    var interval = setInterval(function () {

        if (!txt[0]) {

            return clearInterval(interval);
        };

        ele.innerHTML += txt.shift();
    }, speed != undefined ? speed : 80); //скорость

    return false;
};

writeTextByJS(
    ".main-home__subtitle", //селектор
    [
        "TeXT TeXT TeXT \n",
        "TeXT TeXT TeXT TeXT \n"
    ]
);

.main-home__subtitle{
  font-size: 30px;
  max-width: 300px;
}

<div class="main-home__subtitle"></div>

Answer 1

Можно по классу добавлять для элемента псевдо-элемент ::after, который будет выполнять роль каретки.

function writeTextByJS(id, text, speed) {

  const ele = document.querySelector('.main-home__subtitle');
  const txt = text.join("").split("");

  ele.classList.add("carriage"); // added

  var interval = setInterval(function() {

    if (!txt[0]) {

      ele.classList.remove("carriage"); // added
      return clearInterval(interval);
    };

    ele.innerHTML += txt.shift();
  }, speed != undefined ? speed : 80); //скорость

  return false;
};

writeTextByJS(
  ".main-home__subtitle", //селектор
  [
    "TeXT TeXT TeXT \n",
    "TeXT TeXT TeXT TeXT \n"
  ]
);

.main-home__subtitle {
  font-size: 30px;
  max-width: 300px;
}

/* Added */
.carriage::after {
  content: "";
  display: inline-block;
  width: 2px;
  background-color: #909090;
  height: 1em;
  opacity: 1;
  animation: fading 700ms infinite;
}

@keyframes fading {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="main-home__subtitle"></div>

БЛОГ НА HUSL

Как сделать курсор перед печатающиймся текстом?

Ответы (1 шт):