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

时间：2017-07-28 10:27:13

标签： javascript php jquery html

我正在我的网站登录上实施双因素身份验证，我会创建一个类似苹果的双因素身份验证页面的页面，其中包含6个文本输入，每个代码一个。如果我填写或清空它们，这些输入允许前进和前进。 我试过，但我遇到了很多问题。

  1. 当所有输入都填满后，我在最后一个并尝试使用“退格”删除时，它会删除前一个而不是最后一个。
  2. 当我在已填充的输入上移动光标时，它会自动转到下一个。

    3. $(".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>

3 个答案:

答案 0 :(得分：1)

我认为你所有的问题都来自这个错误的条件：

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

答案 1 :(得分：0)

$(".digit-input").keyup(function(e) { console.log( e.which)
  if (this.value.length == this.maxLength && e.which!=37) {
    $(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>

希望这也能解决你的第二个问题。

答案 2 :(得分：0)

这不完美，但是这样的事情。

$(function(){
	nextEmpty(); //select first empty field
	$(".digit-input").on("input", handleInput) //for values
  		         .on("keydown", handleKey); //for backspace
  
  function handleInput(e){    
    var len = $(this).val().length;
    if(len){
      if( $(e.currentTarget).index() == 5 ){
   	setTimeout(function(){
          alert( "code is:" + getCode() ); //all fields are filled
        }, 10);
      }else{
      	next(e);
      }
    }
  }
  function handleKey(e){
    var len = $(this).val().length;
    if(e.which == 8 && len === 0){
    	setTimeout(function(){ prev(e); }, 10);
    }
  }
  
  function prev(e){
    var $cur = $(e.currentTarget);
    var target = $cur.index() - 1;
    $(`.digits input:eq(${target})`).focus().select();
  }
  function next(e){
    var $cur = $(e.currentTarget);
    var target = $cur.index() + 1;
    $(`.digits input:eq(${target})`).focus().select();
  }
  function nextEmpty(){
   $(".digits input[value='']").filter(":first").focus();
  }
  function getCode(){
    var sb = "";
    $('.digits input').each(function(){
     sb += $(this).val();
    });
    return sb;
  }
});
<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" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit2" name="digit2" class="digit-input" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit3" name="digit3" class="digit-input" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit4" name="digit4" class="digit-input" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit5" name="digit5" class="digit-input" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit6" name="digit6" class="digit-input" value="" size="1" maxlength="1" autocomplete="off" type="text">
</div>

相关问题
最新问题