如何通过填写以前的自动生成新的输入字段？答案

【问题标题】：How to automatically generate new input fields by filling previous?如何通过填写以前的自动生成新的输入字段？
【发布时间】：2023-03-22 08:10:01
【问题描述】：

尽可能简单：我有条件，我不知道我将在哪里拥有 3 个或更多输入元素（“文本”类型），我正在寻找解决方案，当我开始填充第 3 个输入字段时将生成第 4 个输入类型文本字符等等。

在创建/更改数据库时添加新列的类似管理员：

在这里，您单击 + 添加新输入，单击 x 将其删除。这对我也有好处。如何实现/我应该使用什么库？

【问题讨论】：

非常感谢，我真的不知道。
请在这个问题中弹出一些代码。没有看到你尝试过的东西，很难说出你想要什么。
我在问是否有库，我找不到这样的功能，例如 jquery UI
不，这是一个足够简单的问题，不符合标准的用户体验问题，所以我认为大多数库都让你在这 4 行代码中弹出。另外，如果您是 javascript 新手，您可以尝试 twitter-bootstrap 而不是 jquery-ui。它为您提供了一个更完整（值得商榷）的前端框架，看起来更好，并且更易于使用。

标签： javascript jquery forms jquery-ui jquery-plugins

【解决方案1】：

您可以克隆整行，并将其附加到父表。看看 jQuery clone() 和 append()。

示例代码：

$('#yourtableid').on('click', '.add', function() {

   // clone first row
   var row = $('#yourtableid tbody tr:first').clone();

   // reset inputs 
   row.find('input[type!=button]').val('');

   // append cloned row 
   $('#yourtableid tbody').append(row);

});

直播DEMO。

编辑：要在最后一行填充一些文本时自动添加行，您可以使用：

$('#tbl').on('change', 'input', function() {

  // check that some input was entered and that it is in the last tr
  if($(this).val() != '' &&
     $(this).closest('tr').is(':last-child')) {
    addRow();
  }
});

【讨论】：

这解释了问题中给出的不相关示例，但并没有真正回答问题：“我正在寻找解决方案，当我开始填充第 3 个输入字段时将生成第 4 个输入类型文本字符等等。”

【解决方案2】：

如果没有代码示例，很难说出你想要得到什么，但你想要这样的东西吗？

HTML：

<input type='text' />

JS：

$('input').on( 'change', function() {
    $(this).after( '<input type="text" />' );
    $('input').off( 'change' );
});

jsFiddle 已关闭，jsBin 无法处理额外的负载，但here 是一个演示。

【讨论】：

无论你的船漂浮什么。
哈哈！如果这样说，你的意思是有效的 HTML，那么这绝对是我的船。
@BenM 1. 非自闭输入元素是完全有效的 HTML5，各种非自闭标签也是如此。 2. 我没有指定文档类型。如果这是严格的 XHTML，标签不能是自闭合的。 3.一切都好吗？你好像有点不高兴。