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

我不确定我是否正确理解了您的问题，但这是一种聆听＆＃39;输入＆＃39;按下输入元素并使用输入的值创建输入元素的动态列表。

＆＃13;

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;
  }
})

＆＃13;

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

＆＃13;

Answer 2

当我按Enter键时，如果我更改提交，则刷新页面 oninput它显示我正在写的内容，但它没有保存。

您可以使用 Cookie 在每次刷新时存储和保留数据

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

或 WebStorage / Application Storage

https://www.w3schools.com/html/html5_webstorage.asp

但我真的建议学会在数据库中使用服务器端脚本，以便您的数据在浏览器会话中具有永久持久性

https://www.w3schools.com/php/default.asp

Answer 3

您可以使用HTML和Javascript中的这些更改来运行代码：

var formInput = document.getElementById("form-input")
var formOutput = document.getElementById("form-list")

function AddElement() {
  var NewValue = formInput.value;
  var li = document.createElement('li');
  var text = document.createTextNode(NewValue);
  li.appendChild(text);
  formOutput.appendChild(li);
  return false;
}

<form onsubmit="return AddElement();">
  <input type="text" name="" value="" id="form-input">
</form>
<ul id="form-list"></ul>

在提交时显示表单输入

3 个答案: