如何在用户完成填写文本输入时自动克隆?

时间:2012-11-05 02:24:31

标签: javascript jquery javascript-events

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

我的问题是如何在不按Add New按钮的情况下添加新文本字段?当用户填写Text Input nameText Input Phone时,系统会自动添加新行<tr class="person">

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

更新:我还想设置最大克隆,可以这样做吗?

3 个答案:

答案 0 :(得分:3)

如果通过“填充”表示“当用户输入与”电话“字段允许的字符数一样多时”,则可以在输入中添加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测试的第一部分。

此外,您可能希望新克隆的字段为空,因此您可以在添加功能中执行此操作:

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

要设置最大行数,您可以在添加功能中添加测试:

$("#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/

答案 1 :(得分:0)

您可以在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/(从输入到输入的标签)

答案 2 :(得分:0)

我会扩展enclares - 我会为每个文本框使用.blur(),并且每次检查并确保每个值都不是“” - 这将确保两者都被填充

      然后在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();
    });
  }
});​