maxlengthに到達したフォーカス/バックスペースのキー入力

Question

カーソルがある入力フィールドから別の入力フィールドに自動的に移動し、バックスペースを使用して前のフィールドに移動するHTMLフォームがあります。複数の入力フィールドにまたがるシリアル番号を貼り付ける必要がある場合や、複数のフィールド入力で入力した番号を入力または貼り付ける場合などに便利です。

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

あなたは、現在入力中のテキストの lengthは、バックスペースキーが押されたときにゼロであることを確認することでこれを達成することができ

Answer 1

：

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

また、私はを整えました。は単一のイベントハンドラにロジックを持ち、toggleClass()を使用して、1回の呼び出しで両方のクラスを修正しました。