主页 / 问题 / 1506232
Accepted
powerg
Asked:2023-03-19 05:58:30 +0000 UTC2023-03-19 05:58:30 +0000 UTC

如何使光标位于打印文本之前？

  • 772

请告诉我如何制作它以便在其前面键入文本时有光标？当文本结束时光标消失了？谢谢 

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>

javascript

1 个回答

  1. Best Answer

    您可以按类为元素添加一个伪元素::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>

    • 3

相关问题