每个输入字母在单独的行上返回

Question

正如标题所示，我希望输入字段中的每个字母都使用 while 循环显示在新行上。例如，如果有人在输入框中输入“猫”，则会返回：

c

一个

t

这是我目前所拥有的，但目前它只显示第一个字母。

 var input = document.getElementById('userinput').value;
  var i  = input.length;
  while (i--) {
    document.getElementById('message').innerHTML = (input[i]);
  }

Answer 1

行：

document.getElementById('message').innerHTML = (input[i]);

完全覆盖了#message元素的HTML，所以它只会有最后一次迭代的值。相反，你会想做：

document.getElementById('message').innerHTML += (input[i]) + "<br />";

随着<br /> 移动到新行。要以自上而下的方式使用它，您可能需要使用普通的 for 循环：

for(var i = 0; i < input.length; i++)
    document.getElementById('message').innerHTML += input[i] + "<br />";

---

下面是一个基本的 sn-p 示例（按回车键或取消聚焦将触发事件）：

document.getElementById('text').addEventListener("change", function(){
  document.getElementById('message').innerHTML = "";
  input = document.getElementById('text').value;
  for(var i = 0; i < input.length; i++)
      document.getElementById('message').innerHTML += input[i] + "<br />";
});

<input id="text" type="text" />
<div id="message"></div>