创建新表单时，将光标移动到下一个输入表单

Question

在表单中，我想在输入操作上创建一个新表单输入。我将this编码为有效，但光标没有转到新创建的输入并保持不变...

如何将光标移动到添加的输入;

＆＃13;

＆＃13;

var counter = 1;
$('#form')
  .on('keydown', function(e) {
    if (e.which == 13 || e.keyCode == 13) {
      e.preventDefault();

      counter++;
      var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
        .find('.addInput').removeClass('addInput').addClass('removeInput').end()
        .find('[name^="paleta-"]').attr('name', 'paleta-' + counter).val("").attr('tabindex', counter).val("").end()
        .find('i').removeClass('fa-plus').addClass('fa-minus').end();
      $template.insertAfter('.form-group:last');

    }

  })

  // Remove button click handler
  .on('click', '.removeInput', function() {
    var $row = $('.form-group').slice(-1);
    counter--;
    $row.remove();
  });

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="row">
  <div class="col-md-12 col-sm-12">
    <form id="form" method="post" class="form-horizontal" role="form">
      <fieldset>

        <div class="form-group">
          <label for="inputName" class="col-md-1 col-sm-1 control-label">Barcode</label>
          <div class="col-md-2 col-sm-2">
            <input type="text" class="form-control" name="paleta-1" tabindex="1">
          </div>

          <div class="col-md-1 col-sm-1">
            <button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
          </div>

        </div>

        <div class="row">
          <div class="row myTop">
            <div class="col-md-1">
              <button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </div>

      </fieldset>


    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试在$('.form-control:last').focus();点击事件上添加addInput。

或按名称查找输入，如下所示。请查看代码段以供参考。

var inputName="paleta-"+counter;
$("input[name='"+inputName+"']").focus();

＆＃13;

＆＃13;

var counter = 1;

document.getElementById("form").onkeypress = function(e) {
  var key = e.charCode || e.keyCode || 0;
  if (key == 13) {
    addInput();
    e.preventDefault();
  }
}

$('#form').on('click', '.addInput', function() {
    addInput();
  })
  // Remove button click handler
  .on('click', '.removeInput', function() {
    var $row = $('.form-group').slice(-1);
    counter--;
    $row.remove();
  });

function addInput() {
  counter++;
  var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
    .find('.addInput').removeClass('addInput').addClass('removeInput').end()
    .find('[name^="paleta-"]').attr('name', 'paleta-' + counter).val("").attr('tabindex', counter).val("").end()
    .find('i').removeClass('fa-plus').addClass('fa-minus').end();
  $template.insertAfter('.form-group:last');
  var inputName = "paleta-" + counter;
  $("input[name='" + inputName + "']").focus();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 col-sm-12">
    <form id="form" method="post" class="form-horizontal" role="form">
      <fieldset>

        <div class="form-group">
          <label for="inputName" class="col-md-1 col-sm-1 control-label">Barcode</label>
          <div class="col-md-2 col-sm-2">
            <input type="text" class="form-control" name="paleta-1" tabindex="1">
          </div>

          <div class="col-md-1 col-sm-1">
            <button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
          </div>

        </div>

        <div class="row">
          <div class="row myTop">
            <div class="col-md-1">
              <button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </div>

      </fieldset>


    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;