focus next element 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>