Javascript – Automatic submit after type the last digit – C#/Blazor

Some edits on your code.

First: Add class="validationInput" to inputs.

Second: Change "if" statements to "else if" for code run priority and add "else" for checking if sum of all inputs length is >=6 in "input.addEventListener(‘keyup’, function(e)".

HTML:

<div class="card text-center ">
    <div class="card-body">
        <EditForm Model="Code" OnValidSubmit="@VerifyCode" FormName="one-time-code" class="otc">
            <fieldset>
                <!-- https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element -->
                <div>
                    <input class="validationInput" type="number" pattern="[0-9]*" value="" inputtype="numeric" autocomplete="one-time-code" id="otc-1" required>
                    <!-- Autocomplete not to put on other input -->
                    <input class="validationInput" type="number" pattern="[0-9]*" min="0" max="9" maxlength="1" value="" inputtype="numeric" id="otc-2" required>
                    <input class="validationInput" type="number" pattern="[0-9]*" min="0" max="9" maxlength="1" value="" inputtype="numeric" id="otc-3" required>
                    <input class="validationInput" type="number" pattern="[0-9]*" min="0" max="9" maxlength="1" value="" inputtype="numeric" id="otc-4" required>
                    <input class="validationInput" type="number" pattern="[0-9]*" min="0" max="9" maxlength="1" value="" inputtype="numeric" id="otc-5" required>
                    <input class="validationInput" type="number" pattern="[0-9]*" min="0" max="9" maxlength="1" value="" inputtype="numeric" id="otc-6" required>
                </div>
            </fieldset>
        </EditForm>
    </div>
</div>

JavaScript:

<script>
let in1 = document.getElementById('otc-1'),
  ins = document.querySelectorAll('input[type="number"]'),
  splitNumber = function(e) {
    let data = e.data || e.target.value; // Chrome doesn't get the e.data, it's always empty, fallback to value then.
    if (!data) return; // Shouldn't happen, just in case.
    if (data.length === 1) return; // Here is a normal behavior, not a paste action.

    popuNext(e.target, data);
    //for (i = 0; i < data.length; i++ ) { ins[i].value = data[i]; }
  },
  popuNext = function(el, data) {
    el.value = data[0]; // Apply first item to first input
    data = data.substring(1); // remove the first char.
    if (el.nextElementSibling && data.length) {
      // Do the same with the next element and next data
      popuNext(el.nextElementSibling, data);
    }
  };

ins.forEach(function(input) {
  /**
   * Control on keyup to catch what the user intent to do.
   * I could have check for numeric key only here, but I didn't.
   */
  input.addEventListener('keyup', function(e) {
    // Break if Shift, Tab, CMD, Option, Control.
    if (e.keyCode === 16 || e.keyCode == 9 || e.keyCode == 224 || e.keyCode == 18 || e.keyCode == 17) {
      return;
    }

    // On Backspace or left arrow, go to the previous field.
    else if ((e.keyCode === 8 || e.keyCode === 37) && this.previousElementSibling && this.previousElementSibling.tagName === "INPUT") {
      this.previousElementSibling.select();
    } else if (e.keyCode !== 8 && this.nextElementSibling) {
      this.nextElementSibling.select();
    }

    // If the target is populated to quickly, value length can be > 1
    else if (e.target.value.length > 1) {
      splitNumber(e);
    }
    
    else {
     let codeDigits=document.getElementsByClassName("validationInput");
     let digitCount=0;
     let theCodeNumber="";
     for(let a=0;a<codeDigits.length;a++){digitCount+=codeDigits[a].value.length;theCodeNumber+=codeDigits[a].value;}
     if(digitCount>=6){alert("last digit typed. Put your code here to submit to server. code is = "+theCodeNumber);}
    }
    
    
  });

  /**
   * Better control on Focus
   * - don't allow focus on other field if the first one is empty
   * - don't allow focus on field if the previous one if empty (debatable)
   * - get the focus on the first empty field
   */
  input.addEventListener('focus', function(e) {
    // If the focus element is the first one, do nothing
    if (this === in1) return;

    // If value of input 1 is empty, focus it.
    if (in1.value == '') {
      in1.focus();
    }

    // If value of a previous input is empty, focus it.
    // To remove if you don't wanna force user respecting the fields order.
    if (this.previousElementSibling.value == '') {
      this.previousElementSibling.focus();
    }
  });
});

/**
 * Handle copy/paste of a big number.
 * It catches the value pasted on the first field and spread it into the inputs.
 */
in1.addEventListener('input', splitNumber);
</script>