Question

键入数字后，它们会自动转到下一个输入。但是，当我从输入中删除它时，如何将其返回到先前的输入呢？

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

返回上一个输入Javascript

2 个答案: