多行打字表格？

Question

我正在摆弄我在此页面上看到的表单（ https://conceptstudio.am/say-hello/ ），我正在尝试为我正在制作的网站重新创建类似的内容。

我的问题是，我不确定如何实现逐行打字效果，我已经看到了大量的CSS版本，但由于我有标签和跨度标签这不是完全可能的。 我可以自己输入每一行，但它跨越整个div列，通常超过最后一个字母，或者它将整个段落键入一行。 我已经尝试了一个CSS动画延迟也无法正常工作。

我想知道通过JS使用可能的模板字符串或其他东西会更好吗？ 有谁知道一个不错的方法吗？ 我如何实现输入字段？ 我还没有在这方面尝试过多少JS，因为不知道从哪里开始，看过一些例子但是这段代码效果不好。

继续我所拥有的，请注意到目前为止这只是一个（非常糟糕的）试验：

      <form method="post" action="mailer.php" class="contact-form">
<div class="typewriter">
                    <p class="form-name" data-name="Hello, I'm  " data-iname="insert your name" data-company="from " data-cmpany-name="your company" style="display: inline-block;">

                    <label class="nname">Hello, I'm </label><span data-placeholder="insert your name" contenteditable="true" class="name placeholder">insert your name</span><span class="your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span><label class="cname">from </label><span data-placeholder="your company" contenteditable="true" class="company  placeholder">your company</span><span class="your-company"><input type="text" name="your-company" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span><span class="dot" style="display: inline;">.</span></p><br><p class="form-textarea" data-text="I'm interested in " data-name="message" style="display: inline-block;"><label>I'm interested in </label><span data-placeholder="message" class="span placeholder" contenteditable="true">message</span><span class="your-message placeholder"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></span><span class="dot placeholder" style="display: inline;">.</span></p>
                    <p style="display: block"><br></p>
                    <p class="form-mail" data-text="Here's my " data-name="email address" style="display: inline-block;"><label>Here's my </label><span data-placeholder="email address" class="span placeholder" contenteditable="true">email address</span><span class="your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span><span class="dot" style="display: inline;">.</span></p><p style="display: block"><br></p><p class="thanks" data-text="Thank you!" style="display: inline-block;">Thank you!</p>
                </div>
   </div> 

CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    color: #000;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 100;
    font-size: 7px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}


.typewriter {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

.contact-form h2 {
    font-size: 20px;
    color: #fff;
    font-family: 'IBM Plex Sans',sans-serif;
    display: inline-block;
}

.contact-form {
    position: relative;
    height: 100%;
    width: 80%;
    -moz-user-select: element;
    -webkit-user-select: element;
    -ms-user-select: element;
/*    padding: 0 0 260px;*/
    margin: 0 0 0 auto;
    text-align: left;
}

.contact-form p {
    font-size: 20px;
    color: #000;
    font-family: 'IBM Plex Mono', sans-serif;
/*    display: none;*/
    margin: 5px 0 0;
}

.contact-form p span {
    display: inline-block;
    font-size: 25px;
    color: #555;
    font-family: 'IBM Plex Mono', sans-serif;
    word-wrap: break-word;
    margin: 0 0 0 5px;
    position: relative;
    border-bottom: 1px dashed #555;
}

.contact-form input,
.contact-form button,
.contact-form button,
.contact-form .skip,
.contact-form .skip {
    border: none;
    background: none;
    font-size: 20px;
    height: 60px;
    color: #fff1ac;
    font-family: 'IBM Plex Mono', sans-serif;
    padding: 0;
    border-bottom: 1px dashed #fff1ab;
    margin: 0 0 0 5px;
}

.contact-form textarea {
    border: none;
    background: none;
    font-size: 20px;
    color: #fff1ac;
    font-family: 'IBM Plex Mono', sans-serif;
    padding: 0;
    border-bottom: 1px dashed #fff1ab;
}

我的CodePen： https ：//codepen.io/caitlinmooneyx/pen/qwYmqw

Answer 1

实现此类型效果的一种方法是预先准备内容并使用JS逻辑或CSS效果附加到父元素。

// Let's say you have a <div id="typewriter"> </div>

const type = function(){

   // We prepare the contents of that div:
     let text = "Hi there" + "<br>";
     let tags = "<p>What is <input type='text' ... placeholder="your name" /></p>";

     let cnt = 0, len = text.length;
     let elem = document.getElementById("typewriter");
     let interval = setInterval(function(){
           if(cnt >= len){
               clearInterval(interval);
           }
           ++cnt;
           elem.innerHTML += text.charAt(cnt);
     }, 100);

     setTimeout(function(){
         elem.innerHTML += tags;
     }, 100);
}

type();

上面的代码应该以100ms的间隔键入每个字符，并且看起来可以使用更多的css或jquery给出更多的效果。