新しいフォームを作成するときにカーソルを次の入力フォームに移動

Question

フォームでは、入力アクションで新しいフォーム入力を作成します。私はthisをコードしていますが、カーソルは新しい作成された入力には行かず、同じままです。

追加された入力にどのようにカーソルを移動できますか？

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(); 
 
    });

<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>

Answer 1

addInputクリックイベントに$('.form-control:last').focus();を追加してみてください。

以下のように入力してください。参照のためにスニペットを確認してください。

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

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(); 
 
}

<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>