javascript - 如果最后一个输入已填满，则添加输入

Question

我有一个 HMTL 页面，其中包含由 Javascript 创建的输入(类型文本)， 我必须创建一个函数，如果最后一个输入被填充，将创建另一个输入。 如果最后创建的输入已填满，请再次创建另一个输入。 我该如何做到这一点？

这是我到目前为止的代码:

function visualizzaModifica(array, div)
{
    div.html("");
    div.append("<br>");

    let i=1;

    array.forEach(function (e)
    {
        div.append
        (
            "<div class='input-group'>"+
            "<input type='text' id='inputModificaNome"+i+"' class='form-control' value='"+e.nominativo+"'>"+
            "<input type='text' id='inputModificaCellulare"+i+"' class='form-control' value='"+e.cellulare+"'>"+
            "</div>"
        );

        i++;
    });

    div.append("<br>");
    div.append("<button id='btnSalvaTeamLeaderProduzione' class='btn btn-secondary'>Salva</button>");
}

在 forEach 和按钮 Salva 之间，我必须插入一次又一次插入输入的函数，如果您在该函数中看到错误或可能更好的内容，请告诉我。谢谢

Answer 1

要在新创建的文本框已填充的情况下创建另一个文本字段，您需要一个事件处理程序来实现这一点。这意味着我们还需要将事件处理程序分配给新创建的文本字段。下面演示一下。

$(document).ready(function() {
  createNext(0);
});


function createNext(index) {

  if ($('#input-' + index).length == 0) {
    // create the next text box if not exists
    var next = $('<input>', {
      id: 'input-' + index,
      type: 'text',
      placeholder: 'text ' + index,
      class: 'text-chain'
    });

    next.on('change', function() {
      createNext(index + 1)
    });
    next.appendTo($('body'));
  }
}

input {
  margin: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>