Focus next/prev Eingabe auf maxlength erreicht oder Backspace Taste drücken

Question

Ich habe HTML-Formulare gesehen, bei denen der Cursor automatisch von einem Eingabefeld zum anderen wechselt und mit Backspace zum vorherigen Feld wechselt. Dies ist nützlich in Situationen, in denen Sie eine Seriennummer einfügen müssen, die sich über mehrere Eingabefelder erstreckt, oder die Nummer eingeben oder einfügen, die in mehreren Feldeingaben verwendet wird.

$(document).ready(function() { 
 
    $('.Box').on("keyup", function(e) { 
 
    var Length = $(this).attr("maxlength"); 
 
    if ($(this).val().length >= parseInt(Length)) { 
 
     $(this).removeClass("productkey1").addClass("productkey2"); 
 
     $(this).next('.Box').focus(); 
 
    } 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $('.Box').on("keydown", function(e) { 
 
    var Length = $(this).attr("maxlength"); 
 
    if ($(this).val().length > parseInt(Length)) { 
 
     $(this).removeClass("productkey2").addClass("productkey1"); 
 
     $(this).prev('.Box').focus(); 
 
    } 
 
    }); 
 
});

.Box:focus { 
 
    border: thin solid #FFD633; 
 
    -webkit-box-shadow: 0px 0px 3px #F7BB2E; 
 
    -moz-box-shadow: 0px 0px 3px #F7BB2E; 
 
    box-shadow: 0px 0px 3px #F7BB2E; 
 
} 
 
.Box { 
 
    height: 15px; 
 
    width: 4%; 
 
    text-align: justify; 
 
    letter-spacing: 5px; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div> 
 
    <sapn>Enter Key Code :</sapn> 
 
    <input class="Box productkey1" style="width: 35px;" type="password" name="number1" maxlength="1"> 
 
    <input class="Box productkey1" style="width: 35px;" type="password" name="number2" maxlength="1"> 
 
    <input class="Box productkey1" style="width: 35px;" type="password" name="number3" maxlength="1"> 
 
    <input class="Box productkey1" style="width: 35px;" type="password" name="number4" maxlength="1"> 
 
</div>

Answer 1

Sie können dies durch Überprüfen erreichen, dass die length des Textes in der aktuellen Eingabe ist Null, wenn die Backspace-Taste gedrückt wird:

$(document).ready(function() { 
 
    $('.Box').on("keyup", function(e) { 
 
     var $input = $(this); 
 
     if ($input.val().length == 0 && e.which == 8) { 
 
     $input.toggleClass("productkey2 productkey1").prev('.Box').focus(); 
 
     } 
 
     else if ($input.val().length >= parseInt($input.attr("maxlength"), 10)) { 
 
     $input.toggleClass("productkey1 productkey2").next('.Box').focus(); 
 
     } 
 
    }); 
 
});

.Box:focus { 
 
    border: thin solid #FFD633; 
 
    -webkit-box-shadow: 0px 0px 3px #F7BB2E; 
 
    -moz-box-shadow: 0px 0px 3px #F7BB2E; 
 
    box-shadow: 0px 0px 3px #F7BB2E; 
 
} 
 
.Box { 
 
    height: 15px; 
 
    width: 50px; 
 
    text-align: justify; 
 
    letter-spacing: 5px; 
 
    /*CSS letter-spacing Property*/ 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div> 
 
    <sapn>Enter Key Code :</sapn> 
 
    <input class="Box productkey1" type="password" name="number1" maxlength="4"> 
 
    <input class="Box productkey1" type="password" name="number2" maxlength="4"> 
 
    <input class="Box productkey1" type="password" name="number3" maxlength="4"> 
 
    <input class="Box productkey1" type="password" name="number4" maxlength="4"> 
 
</div>

Beachten Sie auch, dass ich dieaufgeräumt habeLogik in einem einzigen Ereignishandler und toggleClass() verwendet, um beide Klassen in einem einzigen Aufruf zu ändern.