Estoy haciendo un sitio, con mucho registro de usuarios, necesario en la práctica, donde se necesita la menor cantidad de clics. Estoy creando campos de entrada de texto, que solo necesitan 1 carácter, antes de pasar al siguiente registro. Sin embargo, estos campos de entrada de texto deben poder desactivarse. Esto lo he resuelto usando casillas marcadas y una función. Mi problema ahora viene, cuando necesito omitir los campos de entrada de texto deshabilitados: digamos que la entrada de texto 2 está deshabilitada, el cursor debe saltar de la entrada de texto 1 a la entrada de texto 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>Esto debería funcionar:
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> Aunque puede que no sea la solución más segura (ya que se usa eval() ), debería ser la más fácil.