Question

我目前正在为我的女友编写一个应用程序，以帮助她追踪生活中的重要事情。这可能是一个相当琐碎的问题，但我承认我还是html和CSS的新手。

有没有我可以编码的过程，可以一次打印一行文本，并等待她的输入，然后再继续下一行？

例如：

<p>
    First line of text.
    Second line of text.
    Third line of text.
</p>

这当前一次打印所有行。有没有一种方法可以根据用户输入对每个参数进行打印？

例如：

“文本的第一行”

停止

等待用户输入

“第二行文字”

停止

等待用户输入

等

我知道这可能很容易，但是我认为问这个问题可能有助于html新手从我的问题中学到东西。

Answer 1

这是一种使用HTML，CSS和Javascript达到预期效果的方法。

如果此设置中有没有立即可用的内容，请在下面的评论中询问后续问题。

工作示例：

let form = document.getElementsByTagName('form')[0];

const revealLine = () => {

  let textLineNumber = document.querySelectorAll('[data-revealed="true"]').length;
  
  if (textLineNumber < 3) {
    
    let textLine = document.getElementsByTagName('label')[textLineNumber];
    textLine.dataset.revealed = 'true';
    textLine.focus();
  }
}

setTimeout(revealLine, 20);

form.addEventListener('change', revealLine, false);

label {
margin-bottom: 12px;
}

input[type="text"] {
  border: none;
  border-bottom: 1px solid rgb(191, 191, 191);
  margin-bottom: 24px;
}

label[data-revealed],
label[data-revealed] + input {
  display: block;
  width: 90%;
  height: 20px;
  opacity: 1;
}

label[data-revealed] {
  overflow: hidden;
  transition: opacity 2s linear;
}

label[data-revealed="false"],
label[data-revealed="false"] + input {
  opacity: 0;
}

<form>
<label data-revealed="false" for="line1">This is the first line of text (type something below and press return)</label>
<input type="text" id="line1" />
<label data-revealed="false" for="line2">This is the second line of text (type something below and press return)</label>
<input type="text" id="line2" />
<label data-revealed="false" for="line3">This is the third line of text</label>
<input type="text" id="line3" />
</form>

是否可以对响应用户输入的输出进行编码？

1 个答案: