focus on next/previous digit

jquery

by Valerie Ren

HTML

<div class="container">

  <div class="row">
    <div class="col-12">
      <h1 class="text-center">Please enter your authentication code </h1>
    </div>
    <div class="col-12">
      <p class="text-center">
        <input name="d1" class="text-center" type="text" maxlength="1" style="width: 40px; height: 40px; font-size:15px" required/>
        <input name="d2" class="text-center" type="text" maxlength="1" style="width: 40px; height: 40px; font-size:15px" required/>
        <input name="d3" class="text-center" type="text" maxlength="1" style="width: 40px; height: 40px; font-size:15px" required/>
        <input name="d4" class="text-center" type="text" maxlength="1" style="width: 40px; height: 40px; font-size:15px" required/>
        <input name="d5" class="text-center" type="text" maxlength="1" style="width: 40px; height: 40px; font-size:15px" required/>
        <input name="d6" class="text-center" type="text" maxlength="1" style="width: 40px; height: 40px; font-size:15px" required/>
        <input name="d7" class="text-center" type="text" maxlength="1" style="width: 40px; height: 40px; font-size:15px" required/>
        <input name="d8" class="text-center" type="text" maxlength="1" style="width: 40px; height: 40px; font-size:15px" required/>
      </p>
      <p class="error_msg"></p>
    </div>
  </div>
  <!-- end of row -->


  <div class="row justify-content-around">
    <div class="col-md-3 col-xs-12">
      <button id="auth_submit" class="btn btn-lg btn-primary btn-block" type="submit">Continue</button>
    </div>
  </div>
  <!-- end of row -->
</div>
<!--  end of container -->

JavaScript

$('input').on('input propertychange', function() {
	  if (this.value.length >= this.maxLength) {
	    $(this).next().focus();
	  }
	}).keyup(function(e) {
	  if (e.which === 8 && !this.value) {
	    $(this).prev().focus();
	  }
	});