Durch Eingabetext gehen, wenn sie gefüllt oder leer sind

Question

Ich implementiere eine 2-Faktor-Authentifizierung auf meiner Website Login und ich würde eine Seite wie die 2-Faktor-Authentifizierung Seite von Apple mit 6 Texteingabe, eine für jeden Code erstellen. Diese Eingaben erlauben es, vorwärts und vorwärts zu gehen, wenn ich sie fülle oder leere. Ich habe versucht zu tun, aber ich hatte eine Menge Probleme.

1. Wenn alle Eingaben gefüllt sind, und ich bin in der letzten und versuche, mit "Backspace" zu löschen, entfernen Sie die vorherige und nicht die letzte.
2. Wenn ich den Cursor auf einen gefüllten Eingang bewege, geht er automatisch zum nächsten.

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

Ich denke, dass alle Ihre Probleme aus diesem falschen Zustand kommen:

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

Dieser Ausdruck Rückkehr immer False. Verwenden Sie stattdessen:

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

Ihr Code jetzt scheint zu funktionieren:

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

Hoffnung wird dies Ihr zweites Problem lösen als auch.

Answer 3

Es ist nicht perfekt, aber so etwas Ähnliches.

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