yaylitzis yaylitzis - 1 year ago 96
HTML Question

Move the cursor to the next input form when you create a new one

In a form, I want to create a new form input on enter action. I coded this which is working but the cursor doesn't go to the new created input and stays on the same..

How can I move the cursor to the added input;



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 Source

Try adding $('.form-control:last').focus(); on addInput click event.

Or find input by name as like below. Check the snippet for reference.

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download