将光标强制移到表单的第一个字段

Question

我的网站上有一个包含多个表单字段的多部分表单。
特别是10个表单字段是'number'字段，它们被包含在一个名为'numberContainer'的div中。

我试图强制用户的光标在该组的第一个字段上开始他们的数据条目，无论他们试图从特定div组中的哪个字段开始

然后……一旦他们在第一个字段中输入了数据，光标就会自动移动到该组中的下一个字段。

我目前正在使用的代码和脚本，确实很好地将数据输入到下一个字段，但无论我尝试过什么……我似乎无法充分调整它来强制光标从第一个字段开始。

基本上我想禁用用户手动点击字段2-10的能力。

在这一点上，我很沮丧。如果有人有任何有用的建议，我将不胜感激。

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" class="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>

Answer 1

你可以使用事件委托(以及更多HTML5标准)

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>