Focus next/prev input on maxlength reached or backspace keypress

Question

I have seen HTML forms whereby the cursor moves from one input field to another automatically and uses backspace to move to the previous field. It's useful in situations like when you are required to paste in a serial number that spans across several input fields, or like typing or pasting number that is taken in multiple field inputs.

$(document).ready(function() {
  $('.Box').on("keyup", function(e) {
    var Length = $(this).attr("maxlength");
    if ($(this).val().length >= parseInt(Length)) {
      $(this).removeClass("productkey1").addClass("productkey2");
      $(this).next('.Box').focus();
    }
  });
});

$(document).ready(function() {
  $('.Box').on("keydown", function(e) {
    var Length = $(this).attr("maxlength");
    if ($(this).val().length > parseInt(Length)) {
      $(this).removeClass("productkey2").addClass("productkey1");
      $(this).prev('.Box').focus();
    }
  });
});

.Box:focus {
  border: thin solid #FFD633;
  -webkit-box-shadow: 0px 0px 3px #F7BB2E;
  -moz-box-shadow: 0px 0px 3px #F7BB2E;
  box-shadow: 0px 0px 3px #F7BB2E;
}
.Box {
  height: 15px;
  width: 4%;
  text-align: justify;
  letter-spacing: 5px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <sapn>Enter Key Code :</sapn>
  <input class="Box productkey1" style="width: 35px;" type="password" name="number1" maxlength="1">
  <input class="Box productkey1" style="width: 35px;" type="password" name="number2" maxlength="1">
  <input class="Box productkey1" style="width: 35px;" type="password" name="number3" maxlength="1">
  <input class="Box productkey1" style="width: 35px;" type="password" name="number4" maxlength="1">
</div>

Answer 1

You can achieve this by checking that the length of the text in the current input is zero when the backspace key is pressed:

$(document).ready(function() {
  $('.Box').on("keyup", function(e) {
      var $input = $(this);
      if ($input.val().length == 0 && e.which == 8) {
        $input.toggleClass("productkey2 productkey1").prev('.Box').focus();
      }
      else if ($input.val().length >= parseInt($input.attr("maxlength"), 10)) {
        $input.toggleClass("productkey1 productkey2").next('.Box').focus();
      }
  });
});

.Box:focus {
  border: thin solid #FFD633;
  -webkit-box-shadow: 0px 0px 3px #F7BB2E;
  -moz-box-shadow: 0px 0px 3px #F7BB2E;
  box-shadow: 0px 0px 3px #F7BB2E;
}
.Box {
  height: 15px;
  width: 50px;
  text-align: justify;
  letter-spacing: 5px;
  /*CSS letter-spacing Property*/
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <sapn>Enter Key Code :</sapn>
  <input class="Box productkey1" type="password" name="number1" maxlength="4">
  <input class="Box productkey1" type="password" name="number2" maxlength="4">
  <input class="Box productkey1" type="password" name="number3" maxlength="4">
  <input class="Box productkey1" type="password" name="number4" maxlength="4">
</div>

Also note that I tidied the on() logic in to a single event handler, and used toggleClass() to amend both classes in a single call.