html js focus next input code example

Example: focus next input

<?php 
<div class="row">
  <div class="col-xs-2">
    <?= $this->Form->input('number_one', array(
      'label' => false,
      'class' => 'form-control number_one' ,
      'maxlength' => "1" ,
      'oninput' => "this.value=this.value.replace(/[^0-9]/g,'');"
    ));?>
    </div>

<div class="col-xs-2">
  <?= $this->Form->input('number_two', array(
    'label' => false,
    'class' => 'form-control number_two ' ,
    'maxlength' => "1" ,
    'oninput' => "this.value=this.value.replace(/[^0-9]/g,'');"
  ));?>
  </div>

<div class="col-xs-2">
  <?= $this->Form->input('number_three', array(
    'label' => false,
    'class' => 'form-control number_three' ,
    'maxlength' => "1" ,
    'oninput' => "this.value=this.value.replace(/[^0-9]/g,'');"
  ));?>
  </div>

<div class="col-xs-2">
  <?= $this->Form->input('number_four', array(
  'label' => false,
  'class' => 'form-control number_four' ,
  'maxlength' => "1" ,
  'oninput' => "this.value=this.value.replace(/[^0-9]/g,'');"
));?>
  </div>

<div class="col-xs-2">
  <?= $this->Form->input('number_five', array(
    'label' => false,
    'class' => 'form-control number_five' ,
    'maxlength' => "1" ,
    'oninput' => "this.value=this.value.replace(/[^0-9]/g,'');"
  ));?>
  </div>

<div class="col-xs-2">
  <?= $this->Form->input('number_six', array(
    'label' => false,
    'class' => 'form-control number_six',
    'maxlength' => "1" ,
    'oninput' => "this.value=this.value.replace(/[^0-9]/g,'');"
  ));?>
  </div>
</div>
?>

  
<script>
  
  $(function() {
    next_focus($('.number_one'),  $('.number_two'));
    next_focus($('.number_two'),  $('.number_three'));
    next_focus($('.number_three'),  $('.number_four'));
    next_focus($('.number_four'),  $('.number_five'));
    next_focus($('.number_five'),  $('.number_six'));


    function next_focus(input1, input2) {
      input1.keyup(function(){
        if(this.value.length == $(this).attr("maxlength")){
          input2.focus();
        }
      });
    }
  }

</script>

Tags:

Php Example