javascript - 用户填写完文本输入后如何自动克隆？

Question

我有带有 2 个文本字段的简单表单，Name并且可以在单击按钮Phone时添加新字段。Add new你可以参考这里jsfiddle。

我的问题是如何在不按下Add New按钮的情况下添加新的文本字段？当用户填写Text Input name并Text Input Phone新行将<tr class="person">自动添加。

我的第二个问题是我不确定如何编写删除代码。

更新：我也想设置最大克隆，可以这样做吗？

Answer 1

如果“填充”是指“当用户输入电话字段允许的尽可能多的字符时”，那么您可以maxlength="10"向输入添加一个属性（根据需要设置值）：

<input type="text" name="phone[]" id="phone" maxlength="10"/>

...并向keyup事件添加一个处理程序，以检查当前值是否已达到maxlength：

$('input[name="phone\[\]"]').keyup(function() {
    if (this===$('input[name="phone\[\]"]').last()[0]
        && this.value.length===+$(this).attr("maxlength")) {
        $("#add").click();
    }
});

请注意，如果用户在最后一行输入，您可能只想进行此测试，因此是if上面测试的第一部分。

此外，您可能希望新克隆的字段为空白，因此您可以在 add 函数中执行此操作：

$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last')
                           .find("input").val("");

要设置最大行数，您可以在 add 函数中进行测试：

$("#add").click(function() {
    var $lastRow = $('#mytable tbody>tr:last');
    if ($lastRow.index() < 10) { // set maximum rows here
        $lastRow.clone(true).insertAfter($lastRow).find("input").val("");
    }
    return false;
});

另请注意，您不需要为这些输入提供id属性，但如果这样做，则在克隆时不应复制它，因为它id应该是唯一的。

对于删除功能，为每一行添加一个删除按钮：

<td><input type="button" class="deleteRow" value="Delete"/></td>

...接着：

$("#mytable").on("click","input.deleteRow", function(){
    if ($("#mytable tr").length > 2) // don't delete the last row
        $(this).closest("tr").remove();
});

演示：http: //jsfiddle.net/3J65U/15/

Answer 2

您可以blur在添加新按钮上执行此操作。还要小心重复的 id，请改用类：

<tr class="person">
  <td><input type="text" name="name[]" class="name" /></td>
  <td><input type="text" name="phone[]" class="phone" /></td>
</tr>

然后在 jQuery 中：

$('.phone').blur(function() {
  var ppl = $('.person').length;
  if ( this.value && ppl < 5 ) { // Max 5 people
    $(this).closest('tr').clone(true)
      .insertAfter('#mytable tr:last')
      .find('input').val('').first().focus();
    $(this).off('blur');
  }
});

演示： http: //jsfiddle.net/elclanrs/YEBQt/（从输入到输入的选项卡）

Answer 3

I would expand on enclares - I would use .blur() for each textbox , and each time check and make sure each value is not "" - that would make sure both are filled

Then in jQuery:

$(document).ready(function() {
    $(".phone").blur(function() {
      var phonetxt = $('.phone'.val();
      var nametxt = $('.name').val();
      if ( phonetxt != "" && nametxt != "" ){
        $(this).closest('tr').clone(true)
            .insertAfter('#mytable tr:last')
            .find('input').val('').first().focus();
    });
}

 $(".name").blur(function() {
    var phonetxt = $('.phone'.val();
    var nametxt = $('.name').val();
    if ( phonetxt != "" && nametxt != "" ){
        $(this).closest('tr').clone(true)
            .insertAfter('#mytable tr:last')
            .find('input').val('').first().focus();
    });
  }
});​