ContactNumber

by JustLikeThatUiDeveloper

HTML

<div class="contact-number">
<label>Contact Number</label>
<input type="text" name="contact" maxlength=3 />
<input type="text" name="contact" maxlength=3 />
<input type="text" name="contact" maxlength=4 />
</div>

CSS

label{
  display: block;
}

JavaScript

//on input change
$('input[name="contact"]').on('input',function(){
//get the next input
var $nextInput = $(this).next('input');
//check whether the input length is equal to the maxlength given in html
if($(this).val().length === parseInt($(this).attr('maxlength'))){

//if true, check the next input's length
    if($nextInput.length){
    //if next input box is present, move the focus to next input.
    $(this).next('input').focus();
  }
  //if there is no next input, blur the focus.
  else{
    $(this).blur();
  }
}
});