Making cursor skip disabled textform-CodePudding

Im making a site, with a lot of user registration, needed in practice, where the least amount of clicks is needed. Im making text input fields, which only need 1 charachter, before jumping to the next registration. However, these text input fields needs to be able to disable. This have I solved by using checked boxes and a function. My problem now comes, when needing to skip disabled text input fields: Lets say text input 2 is disabled, the cursor needs to jump from text input 1 to text input 3.

<form >
  <input type="text" id="yourText1" enabled maxlength="1"  onkeyup="jump(this,'yourText2')"/>
<input type="checkbox" id="yourBox1" checked onm ousedown="this.form.yourText1.disabled=this.checked"/>
 </form>

 <form >
  <input type="text" id="yourText2" enabled maxlength="1"  onkeyup="jump(this,'yourText3')"/>
<input type="checkbox" id="yourBox2" checked onm ousedown="this.form.yourText2.disabled=this.checked"/>
 </form>

 <form >
  <input type="text" id="yourText3" enabled maxlength="1"  onkeyup="jump(this,'yourText4')"/>
<input type="checkbox" id="yourBox3" checked onm ousedown="this.form.yourText3.disabled=this.checked"/>
 </form>

 <form >
  <input type="text" id="yourText4" enabled maxlength="1"  onkeyup="jump(this,'yourText1')"/>
<input type="checkbox" id="yourBox4" checked onm ousedown="this.form.yourText4.disabled=this.checked"/>
 </form>



 <script>
  function jump(field, automove) {
    if (field.value.length >= field.maxLength)
      {document.getElementById(automove).focus();}
    
    }
</script>

CodePudding user response：

This should work:

function jump(field, automove) {
  if (document.getElementById(field).value.length >= document.getElementById(field).maxLength||document.getElementById(field).disabled) {
    if (!document.getElementById(automove).disabled) {
      document.getElementById(automove).focus();
    } else {
      eval(document.getElementById(automove).getAttribute("onkeyup"));
    }
  }
}

<form>
  <input type="text" id="yourText1" enabled maxlength="1" onkeyup="jump('yourText1','yourText2')" />
  <input type="checkbox" id="yourBox1" checked onm ousedown="this.form.yourText1.disabled=this.checked" />
</form>

<form>
  <input type="text" id="yourText2" enabled maxlength="1" onkeyup="jump('yourText2','yourText3')" />
  <input type="checkbox" id="yourBox2" checked onm ousedown="this.form.yourText2.disabled=this.checked" />
</form>

<form>
  <input type="text" id="yourText3" enabled maxlength="1" onkeyup="jump('yourText3','yourText4')" />
  <input type="checkbox" id="yourBox3" checked onm ousedown="this.form.yourText3.disabled=this.checked" />
</form>

<form>
  <input type="text" id="yourText4" enabled maxlength="1" onkeyup="jump('yourText4','yourText1')" />
  <input type="checkbox" id="yourBox4" checked onm ousedown="this.form.yourText4.disabled=this.checked" />
</form>

Although it may not be the safest solution (as eval() is used), it should be the easiest one.