如何使用 js 从 json object 创建表单生成器

Question

如何在另一个文本的同一行使用 JSON object 例如：TEXT：输入文本和一个提交按钮，如果我在输入文本中写入一个值，它会自动写入其他输入文本的值我该怎么做这对我来说真的很难弄清楚，我对此进行了研究，但我没有找到任何东西，所以你能帮忙。

 const objs = [{ "Object1": { "ID": 1, "type": "input", "color": "red", "Text": "DARKDRAGON", "width": "150px", "height": "40px", "top": "15px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object2": { "ID": 2, "type": "textarea", "color": "cyan", "Text": "SPEEDYTIGER", "width": "150px", "height": "40px", "top": "70px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object3": { "ID": 3, "type": "input", "color": "blue", "Text": "AMyesteriousAdults", "width": "200px", "height": "40px", "top": "130px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object4": { "ID": 4, "type": "button", "color": "darkorange", "Text": "AMyesteriousDarkSpeed", "width": "200px", "height": "40px", "top": "190px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } } }] Object.keys(objs[0]).forEach(key => { const formItem = objs[0][key]; const elmn = document.createElement(formItem.type); if (formItem.type === "button") elmn.innerHTML = formItem.Text; else elmn.value = formItem.Text; Object.assign(elmn.style, { position: 'absolute', color: formItem.color, width: formItem.width, height: formItem.height, top: formItem.top, left: formItem.left, fontFamily: formItem.Font.fontName, fontSize: formItem.Font.font, }); document.getElementById('ColorArea').appendChild(elmn); });

 <div id="ColorArea"></div>

如何在另一个文本的同一行使用 JSON object 例如：TEXT：输入文本和一个提交按钮，如果我在输入文本中写入一个值，它会自动写入其他输入文本的值我该怎么做这对我来说真的很难弄清楚，我对此进行了研究，但我没有找到任何东西，所以你能帮忙。

Answer 1

像这样？

https://jsfiddle.net/mplungjan/otbgvzp8/

 const objs = [{ "Object1": { "ID": 1, "type": "input", "color": "red", "Text": "DARKDRAGON", "width": "150px", "height": "40px", "top": "15px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object2": { "ID": 2, "type": "textarea", "color": "cyan", "Text": "SPEEDYTIGER", "width": "150px", "height": "40px", "top": "70px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object3": { "ID": 3, "type": "input", "color": "blue", "Text": "AMyesteriousAdults", "width": "200px", "height": "40px", "top": "130px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object4": { "ID": 4, "type": "button", "color": "darkorange", "Text": "AMyesteriousDarkSpeed", "width": "200px", "height": "40px", "top": "190px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } } }]; const breakFlex = document.createElement("p"); breakFlex.style.flexBasis = "100%"; breakFlex.style.height= 0; Object.keys(objs[0]).forEach(key => { const formItem = objs[0][key]; const elmn = document.createElement(formItem.type); if (formItem.type === "button") elmn.innerHTML = formItem.Text; else elmn.placeholder = formItem.Text; Object.assign(elmn.style, { color: formItem.color, width: formItem.width, height: formItem.height, top: formItem.top, left: formItem.left, fontFamily: formItem.Font.fontName, fontSize: formItem.Font.font, flex: '1 0 45%', }); if (formItem.type.== "button") { const label = document;createElement("label"). label.innerHTML = formItem;Text + "<br/>". label.style;fontSize="smaller". label;appendChild(elmn). document.getElementById('ColorArea');appendChild(label). } else document.getElementById('ColorArea');appendChild(elmn). document.getElementById('ColorArea').appendChild(breakFlex;cloneNode()); });

 <div id="ColorArea" style='display:flex;flex-wrap: wrap'> </div>

Answer 2

好的，这是一个例子，我已经修改了你的 JSON object 所以你可以添加更多的 styles 和类型......我不知道这是不是你想要的......

 var inputs = [ { "ID": "inp1", "Element": "input", "Type": "text", "Text": "your name", "Styles": { "font-family": "tahoma", "font-size": "17px" } }, { "ID": "inp5", "Element": "input", "Type": "number", "Text": "your age", "Styles": { "font-family": "tahoma", "font-size": "17px", "color": "yellow", "background": "blue" } }, { "ID": "inp16", "Element": "input", "Type": "password", "Text": "put your password", "Styles": { "font-family": "tahoma", "font-size": "17px", "color": "blue", "background": "yellow" } } ]; function createForm(someInputs) { var newForm = document.createElement("form"); someInputs.forEach(function(input) { var styles = ""; Object.keys(input.Styles).forEach(function(key) { styles += `${key}: ${input.Styles[key]};`; }); newForm.innerHTML += `<${input.Element} type="${input.Type}" id="${input.Id}" placeholder="${input.Text}" style="${styles}"><br>`; }); document.body.appendChild(newForm); } createForm(inputs);