在填充或清空時移動輸入文本

Question

我在我的網站登錄中實現了雙因素身份驗證，我會創建一個頁面，例如蘋果的雙因素身份驗證頁，其中包含6個文本輸入，每個代碼一個。如果我填充或清空它，這些輸入許可證可以前後移動。 我試過但我有很多問題。

1. 當所有的輸入都填滿了，我在最後一個，並嘗試用「退格」刪除，它刪除前一個，而不是最後一個。
2. 當我將光標移動到填充的輸入上時，它會自動進入下一個。

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

Answer 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>

Answer 2

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

希望這將解決你的第二個問題，也是。

Answer 3

這不是完美的，但像這樣。

$(function(){ 
 
\t nextEmpty(); //select first empty field 
 
\t $(".digit-input").on("input", handleInput) //for values 
 
    \t \t   .on("keydown", handleKey); //for backspace 
 
    
 
    function handleInput(e){  
 
    var len = $(this).val().length; 
 
    if(len){ 
 
     if($(e.currentTarget).index() == 5){ 
 
    \t setTimeout(function(){ 
 
      alert("code is:" + getCode()); //all fields are filled 
 
     }, 10); 
 
     }else{ 
 
     \t next(e); 
 
     } 
 
    } 
 
    } 
 
    function handleKey(e){ 
 
    var len = $(this).val().length; 
 
    if(e.which == 8 && len === 0){ 
 
    \t 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>