Focus next / previous input on maxlength reached or backspace keypress

Question

I saw HTML forms in which the cursor moves from one input field to another automatically and uses the inverse space to go to the previous field. It is useful in situations, for example, when you need to insert a serial number that spans several input fields, or as an input or insertion of a number that runs in several 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 text length text in the current input is zero when you press the return key:

 $(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 equated the on() logic with one event handler and used toggleClass() to change both classes in one call.