使游標跳過禁用文本表單-有解無憂

我正在制作一個需要大量用戶注冊的網站，在實踐中需要最少的點擊量。在跳轉到下一個注冊之前，我制作了只需要 1 個字符的文本輸入欄位。但是，這些文本輸入欄位需要能夠禁用。我通過使用復選框和一個函式解決了這個問題。我的問題現在來了，當需要跳過禁用的文本輸入欄位時：假設文本輸入 2 被禁用，游標需要從文本輸入 1 跳轉到文本輸入 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>

uj5u.com熱心網友回復：

這應該有效：

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>

盡管它可能不是最安全的解決方案（如eval()所使用的那樣），但它應該是最簡單的解決方案。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442472.html

標籤：javascript html

上一篇：解包物件以使用innerHTML顯示其內容

下一篇：移動設備上消失的文本漸變疊加