在提交时显示表单输入
在提交时显示表单输入
提问于 2018-01-31 19:41:02
我有一个带有一个输入字段的表单，当我按下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，它会显示我正在写的内容，但它没有保存。
是否可以像这样显示多个输入？谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-01-31 19:59:08
我不确定我是否正确地理解了您的问题，但是这里有一种方法可以侦听输入元素上的“enter”键，并创建一个带有输入值的输入元素的动态列表。
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>
Stack Overflow用户
发布于 2018-01-31 19:52:04
当我按enter键时，它会刷新页面，如果我将onsubmit更改为oninput，它会显示我正在写的内容，但它没有保存。
您可以使用cookie在每次刷新时存储和保存数据。
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
或网络存储/应用程序存储
但我确实建议您学习如何在数据库中使用服务器端脚本，以便您的数据在浏览器会话中具有永久的持久性。
Stack Overflow用户
发布于 2018-01-31 20:42:44
您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48554979
复制相关文章
相似问题
有没有不需要jQuery.UI的jQuery可排序插件
有没有可以替代html select标签的jQuery插件？
jQuery对话框插件就像广告一样
有没有jQuery投票插件？
有没有jquery的滚动插件？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
