javascript - 提交时显示表单输入

Question

我有一个只有一个输入字段的表单，当我按 enter 时我希望看到这个输入写在表格下面。我希望有尽可能多的输入，每个新输入都显示在前一个输入的下方。

我这样试过，但失败了。

<form>
  <input type="text" name="" value="" id="form-input">
</form>
<ul>
  <li id="form-list"></li>
</ul>

然后在我的 <script> 里面标签:

var formInput = document.getElementById("form-input")
var formOutput = document.getElementById("form-list")
formOutput.innerHTML = formInput.value;
formInput.onsubmit = function() {
  formOutput.innerHTML = this.value;
}

当我按下 enter 时如果我更改 onsubmit，它会刷新页面至 oninput它会显示我正在写的内容，但不会保存。

是否可以像这样显示多个输入？谢谢

Answer 1

我不确定我是否正确理解了您的问题，但这是一种监听输入元素上的“输入”键按下并创建具有输入值的输入元素动态列表的方法。

var inputEl = document.getElementById("in");
var targetList = document.getElementById("list");

function createItem(text){
  var listItem = document.createElement('li');
  var input  = document.createElement('input');
  input.type = 'text';
  input.value = text;
  listItem.appendChild(input);
  targetList.appendChild(listItem);
}

inputEl.addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {
    createItem(inputEl.value);
    inputEl.value = '';
    e.preventDefault();
    return false;
  }
})

<form>
  <input id="in" type="text" name="" value="">
</form>
<ul id="list">
</ul>