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 onmousedown="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 onmousedown="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 onmousedown="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 onmousedown="this.form.yourText4.disabled=this.checked"/>
</form>
<script>
function jump(field, automove) {
if (field.value.length >= field.maxLength)
{document.getElementById(automove).focus();}
}
</script>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 onmousedown="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 onmousedown="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 onmousedown="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 onmousedown="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.