0

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

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>

1 ответ 1

3

Можно по классу добавлять для элемента псевдо-элемент ::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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.