Question

我尝试制作包含多个字段的输入表单，并在div中生成此内容的预览。我希望用户能够按照自己的意愿添加其他字段。我有基本的功能，但任何时候我都可以添加＆＃34;另外一个字段，我之前字段的输入内容被删除。任何建议将不胜感激。我已经在下面提供了相关代码。

    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返回HTML结构，但它排除了表单元素的value属性（例如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

在保持输入内容的同时添加其他字段

1 个答案: