在maxlength reach或backspace keypress上关注next / prev输入

Question

我看过HTML表单，光标自动从一个输入字段移动到另一个输入字段，并使用退格键移动到前一个字段。 它适用于需要粘贴跨越多个输入字段的序列号，或者键入或粘贴多个字段输入中的数字时的情况。

 $(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

您可以通过在按下退格键时检查当前输入中文本的length为零来实现此目的：

 $(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> 

另请注意，我将on()逻辑整理到单个事件处理程序中，并使用toggleClass()在单个调用中修改这两个类。