在保持输入内容的同时添加额外的字段

Question

我正在尝试制作一个包含多个字段的输入表单，并在 div 中生成此内容的预览。我希望用户能够根据需要添加其他字段。我可以使用基本功能，但每当我 "add" 一个附加字段时，我之前字段中输入的内容都会被清除。任何建议将不胜感激。我在下面包含了相关代码。

    function addInput(){
        var inpts = document.getElementById("inputs");
        var inputCounter = Number(document.getElementById("inputCounter").innerHTML);
        var incCount = inputCounter+1;
        var currentInfo = inpts.innerHTML;
        var newField = "<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />";

        inpts.innerHTML = currentInfo + newField;
        document.getElementById("inputCounter").innerHTML = incCount;
    }

函数调用如下所示...

    <div style="display: none;" id="inputCounter">1</div>
    <div id='inputs'>
            <textarea id='1' rows="2" onblur="updatePreview()"></textarea> <div onclick="addInput()" style="display: inline-block;">XX</div><br />
    </div>

Answer 1

innerHTML returns HTML 结构但它排除了表单元素的值属性（例如 textarea）。

相反，您可以创建一个新元素来保存附加字段，然后将该元素附加到 inputs:

function addInput(){
  var inpts = document.getElementById("inputs"),
      inputCounter = Number(document.getElementById("inputCounter").innerHTML),
      incCount = inputCounter+1,
      div = document.createElement('div');

  div.innerHTML= "<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />";
  inpts.appendChild(div);
  document.getElementById("inputCounter").innerHTML = incCount;
} //addInput

Working Fiddle

创建新元素的替代方法是使用 insertAdjacentHTML:

function addInput(){
  var inpts = document.getElementById("inputs"),
      inputCounter = Number(document.getElementById("inputCounter").innerHTML),
      incCount = inputCounter+1;

  inpts.insertAdjacentHTML(
    'beforeend',
    "<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />"
  );

  document.getElementById("inputCounter").innerHTML = incCount;

} //addInput

Working Fiddle #2

在保持输入内容的同时添加额外的字段

add additional fields while maintaining input content

html

javascript

forms

textarea