返回上一个输入Javascript

Question

输入数字后，它们会自动转到下一个输入。 但是当我从输入中删除它时，如何将它恢复到以前的输入？

JSfiddle

 (function() { var inputs = $("#passForm input"); inputs.each(function(i, item) { $(item).keyup(function() { if ($(this).val().length == $(this).attr('maxlength') && inputs[i + 1]) { if (inputs[i + 1]) { inputs[i + 1].focus(); } } }); }); }());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="" role="form" method="post" id="passForm"> <input type="text" class="passInput" autofocus name="pass[]" maxLength="1" autocomplete="off" size="1" min="0" max="9" required pattern="[0-9]{1}" /> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" /> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" /> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" /> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" /> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" pattern="[0-9]{1}" /><br> <button type="submit" class="btn btn-lg btn-primary" style="margin: 30px 0 50px;"> submit </button> </form>

Answer 1

为了获得更好的用户体验，我会使用单个输入，根本不使用 JS

 <form action="" role="form" method="post" id="passForm"> <input type="text" class="passInput" name="pass" maxLength="6" pattern="\\d{6}" autocomplete="off" required autofocus > <button type="submit" class="btn btn-lg btn-primary">SUBMIT</button> </form>

否则，如果您需要“6 个字段设计”，这里有一个更好的 JS 解决方案

 var $inp = $(".passInput"); $inp.on({ input: function(ev) { if(this.value) { $inp.eq($inp.index(this) + 1).focus(); } }, keydown: function(ev) { var i = $inp.index(this); if(ev.which===8 && !this.value && i) { $inp.eq(i - 1).focus(); } } });

 .passInput {text-align: center;}

 <form action="" role="form" method="post" id="passForm"> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\\d{1}" autofocus> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\\d{1}"> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\\d{1}"> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\\d{1}"> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\\d{1}"> <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" pattern="\\d{1}"> <button type="submit" class="btn btn-lg btn-primary">SUBMIT</button> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

你可以检查这样的事情：

 if ($(this).val().length == $(this).attr('maxlength') && inputs[i + 1]) {
      if (inputs[i + 1]) {
        inputs[i + 1].focus();
      }
    }

要检查您是否在第一个输入中，请不要做任何事情

这是小提琴：

https://jsfiddle.net/L8yz4se3/14/