如何使用vanilla javascript - no jquery将用户输入从单个表单转换为不同div中的不同文本？
如何使用vanilla javascript - no jquery将用户输入从单个表单转换为不同div中的不同文本？
提问于 2018-12-19 13:22:50
我需要动态创建一个具有用户输入字段和提交按钮的表单，当单击该按钮时，会将文本从用户输入字段转移到一个包含在div中的文本区。
我有更多的代码，但它真的很长很乱，我目前正在重构它。我只是被这部分卡住了。
到目前为止，我在slack上看到的类似问题的答案在jQuery中给出了答案。
这是我到目前为止所掌握的
//hide element
function hide(x) {
// document.getElementsByClassName(x).style.display = "none";
var elems = document.getElementsByClassName(x);
for (var i=0;i<elems.length;i+=1){
elems[i].style.display = 'none';
}
}
//show element
function show(x) {
event.preventDefault();//prevents divs from dissapearing after 'Add a list' button has been clicked
// document.getElementsByClassName(x).style.display = "none";
var elems = document.getElementsByClassName(x);
for (var i=0;i<elems.length;i+=1){
elems[i].style.display = 'block';
}
}
//create textarea for lists
var textareaElement = document.createElement('textarea');
textareaElement.setAttribute("type", "text");
textareaElement.setAttribute("class", "textarea-title");
textareaElement.setAttribute("overflow", "break-word");
textareaElement.setAttribute("placeholder", "Enter list title...");
var titleTaker = document.getElementsByClassName('list-input').value;
textareaElement.innerHTML = titleTaker;input[type=text].list-input {
display: block;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(127, 170, 199);
border-radius: 3px;
height: 30px;
margin: 5px;
box-shadow: 0 0 0 1px rgb(127, 170, 199);
font-size: 14px;
padding-left: 10px;
display: none;
}
.add-list-button-container {
margin: 0 5px 5px;
display: none;
}
input[type=submit].list-input-button {
color: rgb(255, 255, 255);
background-color: #5aac44;
box-shadow: 0 1px 0 0 #3f6f21;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 2px 0 rgb(46, 73, 39);
border: none;
font-size: 14px;
height: 30px;
padding-left: 14px;
padding-right: 14px;
margin-right: 10px;
font-weight: 700;
}
.textarea-container {
display: flex;
flex-direction: row;
}
textarea {
display: block;
word-wrap: break-word;
overflow: hidden;
padding:5px 10px;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(127, 170, 199);
border-radius: 3px;
font-size: 14px;
outline: none; /* Removes the blue glow from around textarea */
resize: none; /* Removes resize handle */
}
.textarea-title{
box-shadow: 0 0 0 1px rgb(127, 170, 199);
height: 20px;
max-height: 120px;
margin-top: 6px;
margin-left: 10px;
/* clear: right !important; */
}<form onsubmit="return show('list-wrapper');">
<a class="list-links" href="#" onclick="hide('list-links'); show('list-input'); show('add-list-button-container'); ">
<span class="link-selector">
<span class="plus-icon"><i class="fas fa-plus"></i></span>
<span class="add-list">Add list</span>
<span class="add-another-list">Add another list</span>
</span>
</a>
<input type="text" class="list-input" required
minlength="1" autocomplete="off" maxlength="500" placeholder="Enter list title...">
<div class="add-list-button-container">
<input class="list-input-button" type="submit" value="Add List" required
minlength="1" maxlength="500" placeholder="Enter list title..." >
<a class="list-close-button" href="#"><i class="fas fa-times"></i></a>
</div>
</form><!-- end of form -->
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-19 13:35:50
这段代码使用委托事件处理，因此当执行js时，您可以对dom中不存在的表单上的提交操作作出响应。查看包含e.target的部分，以了解实际操作。附加的p元素只是附加到通过选择目标表单的父元素找到的dom元素。
// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);
function addList(e) {
e.preventDefault();
const input = document.getElementById("list-name");
const name = input.value;
input.value = '';
if ('' == name) {
return;
}
const list = document.createElement('div');
list.setAttribute('class', 'list');
list.innerHTML =
`<h3>` + name + `</h3>
<form class="add-item-form">
<textarea></textarea>
<input type="submit" value="Add New Item">
</form>`;
document.getElementById("list-container").appendChild(list);
}
// add new item submit eventlistener
document.addEventListener('submit', function(e) {
if (e.target.matches('.add-item-form')) {
e.preventDefault();
const textarea = e.target.getElementsByTagName('textarea')[0];
const text = textarea.value;
textarea.value = '';
if ('' == text) {
return;
}
const listItem = document.createElement('p');
listItem.innerHTML = text;
e.target.parentElement.appendChild(listItem);
}
});#list-container {
margin-top: 20px;
padding: 2px;
border-radius: 4px;
background: #666;
border: 1px solid #333;
}
.list {
padding: 4px;
border-radius: 4px;
background: #ccc;
border: 1px solid #333;
margin: 2px;
}
.list h3 {
margin: 0;
}<form id="add-list-form">
<input type="text" id="list-name">
<input type="submit" value="Add New List">
</form>
<div id="list-container">
<div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53845045
复制相关文章
相似问题
腾讯云开发者
