我如何以打字效果的形式显示 span 标签内的输入值？

Question

当我点击write按钮时，输入的值应该以打字效果的形式显示在id为caption的span中。但是任何字符的打字速度应该是30ms。这意味着当显示第一个字符时，第二个字符显示延迟 30ms 并且也到最后。显示文本确实有 30 毫秒的延迟（第一个 setTimeout）。我写了下面的代码，但没有用。输出为数字形式。如何解决？

const caption = document.getElementById("caption");
const input = document.getElementById("user-caption");

function typing() {
  const input_array = input.value.split("");
  setTimeout(myfunction(), 30);

  function myfunction() {
    for (let i = 0; i < input_array.length; i++) {
      caption.innerHTML += setTimeout(function() {
        return input_array[i];
      }, 30);
    }
  }
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  background-color: #505050;
}

.container {
  background-color: black;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  gap: 8px;
  width: 680px;
  height: 360px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.console {
  margin: 0;
  color: #fff;
  font-size: 27px;
}

#cursor {
  display: inline-block;
  width: 16px;
  height: 4px;
  margin-bottom: -5px;
  margin-left: 5px;
  background-color: #fff;
  animation: cursorMotion 1s 0.5s ease infinite;
}

@keyframes cursorMotion {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.main {
  height: 80%;
  padding: 40px;
  padding-bottom: 0;
}

.footer {
  height: 20%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.footer button {
  height: 35px;
  min-width: 120px;
  font-family: inherit;
  cursor: pointer;
  font-size: 16px;
}

.footer input {
  height: 35px;
  width: 230px;
  font-family: inherit;
  padding: 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />
  <title>تایپ کردن</title>
</head>

<body>
  <div class="container">
    <main class="main">
      <p class="console">
        <span>C:\</span>
        <span id="caption"></span>
        <span id="cursor"></span>
      </p>
    </main>
    <footer class="footer">
      <input type="text" id="user-caption" placeholder="your text ..." />
      <button id="test-typing" onclick="typing()">write</button>
      <button id="test-erasing">eraser</button>
    </footer>
  </div>
  <script src="main.js"></script>
</body>

</html>

Answer 1

const caption = document.getElementById("caption");
const input = document.getElementById("user-caption");

  function typing() {
    const input_array = input.value.split("");
    myfunction(input_array);

    function myfunction(input) {
      if (!input.length) return;
      const w = input.shift();
      caption.innerHTML += w;

      setTimeout(() => myfunction(input), 30);
    }
  }

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  background-color: #505050;
}

.container {
  background-color: black;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  gap: 8px;
  width: 680px;
  height: 360px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.console {
  margin: 0;
  color: #fff;
  font-size: 27px;
}

#cursor {
  display: inline-block;
  width: 16px;
  height: 4px;
  margin-bottom: -5px;
  margin-left: 5px;
  background-color: #fff;
  animation: cursorMotion 1s 0.5s ease infinite;
}

@keyframes cursorMotion {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.main {
  height: 80%;
  padding: 40px;
  padding-bottom: 0;
}

.footer {
  height: 20%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.footer button {
  height: 35px;
  min-width: 120px;
  font-family: inherit;
  cursor: pointer;
  font-size: 16px;
}

.footer input {
  height: 35px;
  width: 230px;
  font-family: inherit;
  padding: 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />
  <title>تایپ کردن</title>
</head>

<body>
  <div class="container">
    <main class="main">
      <p class="console">
        <span>C:\</span>
        <span id="caption"></span>
        <span id="cursor"></span>
      </p>
    </main>
    <footer class="footer">
      <input type="text" id="user-caption" placeholder="your text ..." />
      <button id="test-typing" onclick="typing()">write</button>
      <button id="test-erasing">eraser</button>
    </footer>
  </div>
  <script src="main.js"></script>
</body>

</html>

我如何以打字效果的形式显示 span 标签内的输入值？

How I show value of an input inside a span tag in the form of typing effect?

javascript

forms

settimeout

reactjs