I have a multipart form on my website which contains multiple form fields.
10 of the form fields in particular, are 'number' fields, and are contained in a single div named 'numberContainer'.

I am trying to force the user's cursor to begin their data entry on the first field of that group, no matter which field within that particular div group they attempt to start on.

Then... once they have entered the data into the first field, the cursor automatically moves to the next field within that group.

The code and script I am currently working with, does advance the data entry to the next field nicely, but no matter what I have tried... I cannot seem to tweak it enough to force the cursor to begin on the first field.

Essentially I want to disable the user's manual ability to click on fields 2-10.

At this point, I'm frustrated. If anyone has any helpful suggested, they would be greatly appreciated.

var numberContainer = document.getElementsByClassName("numberContainer")[0];
numberContainer.onkeyup = function(e) {
  var target = e.srcElement;
  var maxLength = parseInt(target.attributes["maxlength"].value, 10);
  var myLength = target.value.length;
  if (myLength >= maxLength) {
    var next = target;
    while (next = next.nextElementSibling) {
      if (next == null)
        break;
      if (next.tagName.toLowerCase() == "input") {
        next.focus();
        break;
      }
    }
  }
}

<form action="" method="post" enctype="multipart/form-data">

  <div Id="numberContainer" name="numberContainer" >

    1.&nbsp&nbsp&nbsp
    <input type="text" name="input_01" maxlength="1"></input>
    <br><br> 2.&nbsp&nbsp&nbsp
    <input type="text" name="input_02" maxlength="1"></input>
    <br><br> 3.&nbsp&nbsp&nbsp
    <input type="text" name="input_03" maxlength="1"></input>
    <br><br> 4.&nbsp&nbsp&nbsp
    <input type="text" name="input_04" maxlength="1"></input>
    <br><br> 5.&nbsp&nbsp&nbsp
    <input type="text" name="input_05" maxlength="1"></input>
    <br><br> 6.&nbsp&nbsp&nbsp
    <input type="text" name="input_06" maxlength="1"></input>
    <br><br> 7.&nbsp&nbsp&nbsp
    <input type="text" name="input_07" maxlength="1"></input>
    <br><br> 8.&nbsp&nbsp&nbsp
    <input type="text" name="input_08" maxlength="1"></input>
    <br><br> 9.&nbsp&nbsp&nbsp
    <input type="text" name="input_09" maxlength="1"></input>
    <br><br> 10.&nbsp
    <input type="text" name="input_10"></input>

  </div>

CodePudding user response：

you can use event delegation (and more HTML5 standards)

const
  myForm  = document.querySelector('#my-form')
, mf_nums = [...myForm.querySelectorAll('fieldset#numberContainer input')]
  ;
myForm.onsubmit = e =>
  {
  e.preventDefault(); // disable form submit -> for testing environement
  }
myForm.oninput = e =>
  {
  if ( e.target.matches('fieldset#numberContainer input[maxlength="1"]')
    && e.target.value.length===1 
    ){
    let nextOneIndx = mf_nums.findIndex(el=>el===e.target)  1;
    if (nextOneIndx < mf_nums.length)
      {
      mf_nums[nextOneIndx].focus();
      }
    else
      {
      let nextTab =  e.target.getAttribute('tabindex')  1;
      myForm.querySelector(`[tabindex="${nextTab}"]`).focus();
      }
    }
  }
myForm.onclick = e =>
  {
  if ( e.target.matches('fieldset#numberContainer input[maxlength="1"]')
    && e.target.value.length===0
    ){ 
    let freeOne = mf_nums.find(el=>el.value==='');  // find 1st input free
    if (freeOne) freeOne.focus()
    }
  }

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
#my-form fieldset {
  width  : 24rem;
  margin : 1rem;
  }  
#my-form label {
  display : block;
  margin  : .8rem;  
  }      
#numberContainer  {
  counter-reset : numentry;
  }
#numberContainer input {
  width      : 4rem;
  text-align : center;
  }
#numberContainer label:before {
  counter-increment : numentry;
  display : inline-block;
  content : counter(numentry);
  width   : 1.5rem;
  }

<form id="my-form" >
  <fieldset>
    <legend>other field</legend>
    <label> text 1 <input type="text" name="text_01" tabindex="0"></label>
    <label> text 2 <input type="text" name="text_02" tabindex="1"></label>
  </fieldset>

  <fieldset Id="numberContainer">
    <legend>fied for numbers</legend>
    <label> <input type="text" name="input_01" minlength="1" maxlength="1" tabindex="2"></label>
    <label> <input type="text" name="input_02" minlength="1" maxlength="1" tabindex="3"></label>
    <label> <input type="text" name="input_03" minlength="1" maxlength="1" tabindex="4"></label>
    <label> <input type="text" name="input_04" minlength="1" maxlength="1" tabindex="5"></label>
    <label> <input type="text" name="input_05" minlength="1" maxlength="1" tabindex="6"></label>
    <label> <input type="text" name="input_06" minlength="1" maxlength="1" tabindex="7"></label>
    <label> <input type="text" name="input_07" minlength="1" maxlength="1" tabindex="8"></label>
    <label> <input type="text" name="input_08" minlength="1" maxlength="1" tabindex="9"></label>
    <label> <input type="text" name="input_09" minlength="1" maxlength="1" tabindex="10"></label>
    <label> <input type="text" name="input_10" minlength="1" maxlength="1" tabindex="11"></label>
  </fieldset>

  <fieldset>
    <legend>extra field</legend>
    <label> text x <input type="text" name="text_X" tabindex="12"></label>
    <label> text y <input type="text" name="text_Y" tabindex="14"></label>
    <label> text z <input type="text" name="text_z" tabindex="15"></label>
  </fieldset>

  <button type="reset"  tabindex="17">reset</button>
  <button type="submit" tabindex="16">submit</button>
</form>