javascript – 填充或清空时移动输入文本

2023年8月9日 122次阅读

我正在我的网站登录上实现双因素身份验证,我将创建一个页面,如苹果的双因素身份验证页面,带有6个文本输入,每个代码一个.如果我填写或清空它们,这些输入允许前进和前进.

我试过,但我遇到了很多问题.

>当所有输入都被填满,并且我在最后一个并尝试使用“退格”删除时,它将删除前一个而不是最后一个.
>当我将光标移动到填充的输入上时,它会自动进入下一个输入.

$(".digit-input").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).next('.digit-input').focus();
  }
  verificaSePieno();
});

$(".digit-input").keydown(function(e) {
  if ((e.which == 8 || e.which == 46) && $(this).text() == "") {
    $(this).prev('.digit-input').focus();
  }
  verificaSePieno();
});

function verificaSePieno() {
  if ($("#digit1").text() != "" && $("#digit2").text() != "" && $("#digit3").text() != "" && $("#digit4").text() != "" && $("#digit5").text() != "" && $("#digit6").text() != "") {
    $("#submitBtn").removeClass("disabled");
  } else {
    $("#submitBtn").addClass("disabled");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="digits">
  <input id="digit1" name="digit1" class="digit-input" data-indx="0" data-next-id="digit2" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit2" name="digit2" data-prev-id="digit1" class="digit-input" data-indx="1" data-next-id="digit3" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit3" name="digit3" data-prev-id="digit2" class="digit-input" data-indx="2" data-next-id="digit4" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit4" name="digit4" data-prev-id="digit3" class="digit-input" data-indx="3" data-next-id="digit5" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit5" name="digit5" data-prev-id="digit4" class="digit-input" data-indx="4" data-next-id="digit6" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit6" name="digit6" data-prev-id="digit5" class="digit-input" data-indx="5" value="" size="1" maxlength="1" autocomplete="off" type="text">
</div>

最佳答案 我认为你所有的问题都来自这种错误的情况：

$("#digit").text() != ""

此表达式始终返回False.改为使用：

$("#digit").val() != ""

您的代码现在似乎工作：

$(".digit-input").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).next('.digit-input').focus();
  }
  verificaSePieno();
});

$(".digit-input").keydown(function(e) {
  if ((e.which == 8 || e.which == 46) && $(this).val() == "") {
    $(this).prev('.digit-input').focus();
  }
  verificaSePieno();
});

function verificaSePieno() {
  if ($("#digit1").val() != "" && $("#digit2").val() != "" && $("#digit3").val() != "" && $("#digit4").val() != "" && $("#digit5").val() != "" && $("#digit6").val() != "") {
    $("#submitBtn").removeClass("disabled");
  } else {
    $("#submitBtn").addClass("disabled");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="digits">
  <input id="digit1" name="digit1" class="digit-input" data-indx="0" data-next-id="digit2" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit2" name="digit2" data-prev-id="digit1" class="digit-input" data-indx="1" data-next-id="digit3" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit3" name="digit3" data-prev-id="digit2" class="digit-input" data-indx="2" data-next-id="digit4" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit4" name="digit4" data-prev-id="digit3" class="digit-input" data-indx="3" data-next-id="digit5" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit5" name="digit5" data-prev-id="digit4" class="digit-input" data-indx="4" data-next-id="digit6" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit6" name="digit6" data-prev-id="digit5" class="digit-input" data-indx="5" value="" size="1" maxlength="1" autocomplete="off" type="text">
</div>
点赞