Navigate forwards and backwards in ASP.NET Core MVC

Question

I have 5 fields

Field 1 is a number field Field 2-4 are letter fields

I want to be able to navigate from the number field to the first letter field with TAB and back again with SHIFT+TAB. I want to be able to navigate forward from field 2 to field 4 not with TAB, but navigate back with SHIFT+TAB, for example from field 3 to field 2. Navigating forward in the letter fields is done automatically, as soon as there are 4 letters in the text field it automatically jumps to the next field.

I am not getting any further, so far I have the following script code and the corresponding fields. The automatic forward navigation works and the navigation with TAB is deactivated. Unfortunately, I can no longer navigate from the number field to the letter fields. Navigating back does not work. As soon as I go back with SHIFT+Tab, it immediately jumps back into the field if there are 4 characters in the letter field.

What else am I missing or what have I implemented incorrectly?

@section Scripts
{
<script>
    $(".form-control").keydown(function (e) {
        if (e.keyCode === 9) { 
            if (e.shiftKey) {                     
            } else {
                e.preventDefault(); 

                if (this.value.length === this.maxLength) {                        
                    $(this).parent().next().find('.form-control').focus();
                }
            }
        }
    });

    $(".form-control").keyup(function () {
        if (this.value.length === this.maxLength) {
            var $next = $(this).parent().next().find('.form-control');
            if ($next.length)
                $next.focus();
            else
                $(this).blur();
        }
    });
</script>

}

<div class="row">
 <div class="col-sm-6">
    <label class="col-form-label">@HtmlLocalizer["Number"]</label>
 </div>
 <div class="row">
    <div class="col-sm-3">
    @Html.TextBoxFor(model => model.Number, new { oninput = "javascript: this.value = this.value.replace(/[^0-9]/g, '')", @class = "form-control"})                    
    </div>
    @Html.ValidationMessageFor(model => model.Number, "", new { @class = "text-danger" })
 </div>
</div>           
            
<div class="row">
<div class="col-sm-3">
    <input class="form-control" asp-for="LetterField1" maxlength="4" />
</div>
<div class="col-sm-3">
    <input class="form-control" asp-for="LetterField2" maxlength="4" />
</div>
<div class="col-sm-3">
    <input class="form-control" asp-for="LetterField3" maxlength="4" />
</div>
<div class="col-sm-3">
    <input class="form-control" asp-for="LetterField4" maxlength="4" />
</div>
</div>

Thanks for the help.

Answer 1

I create a demo to reproduce your project and it works as you said, Hope it can give you some help.

<div class="row">
    <div class="col-sm-3">
        <input class="form-control letter-field" asp-for="LetterField1" maxlength="4" />
    </div>
    <div class="col-sm-3">
        <input class="form-control letter-field" asp-for="LetterField2" maxlength="4" />
    </div>
    <div class="col-sm-3">
        <input class="form-control letter-field" asp-for="LetterField3" maxlength="4" />
    </div>
    <div class="col-sm-3">
        <input class="form-control letter-field" asp-for="LetterField4" maxlength="4" />
    </div>
</div>

@section Scripts{
    <script>

        $(".letter-field").keydown(function (e) {
           if (e.keyCode === 9) {
                
                if (e.shiftKey) {
                    
                }else{
                    e.preventDefault();
                }              
           }       
        });

        $(".letter-field").keyup(function (e) {
        if ( e.key === "Tab" || e.key === "Shift") {
           
       }else{
            if (this.value.length === this.maxLength) {
                if (e.shiftKey && e.key === "Tab") {

                } else if (!e.shiftKey) {
                    var $next = $(this).parent().next().find('.letter-field');
                    if ($next.length) {

                        $next.focus();
                    }
                    else
                        $(this).blur();
                }
            }
       }           
    });