自動聚焦下一個輸入字段

Question

您如何自動聚焦下一個輸入字段？

這樣將所有輸入字段一個接一個放置時

<div>
    <input type="number" name="name">
    <input type="number" name="name">
    <input type="number" name="name">
</div>

你通常可以做這樣的事情

this.nextSibling.nextSibling.focus();

但是，我遇到的情況是，每個輸入字段之間都有可變數量的<span>標記。

就像是

<div>
    <input type="number" name="name">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <input type="number" name="name">
    <span></span>
    <input type="number" name="name">
    <span></span>
    <span></span>
    <input type="number" name="name">
</div>

我該如何配置

this.nextSibling.nextSibling.focus();

進入下一個輸入兄弟？

Answer 1

您可以一直循環遍歷nextElementSibling直到找到與您要查找的tagName匹配的對象：

 document.querySelectorAll('input').forEach((input) => { input.oninput = function() { let { nextElementSibling } = this; while (nextElementSibling && nextElementSibling.tagName !== 'INPUT') { nextElementSibling = nextElementSibling.nextElementSibling; } if (nextElementSibling) { nextElementSibling.focus(); } } }); 

 <div> <input type="number" name="name"> <span></span> <span></span> <span></span> <span></span> <input type="number" name="name"> <span></span> <input type="number" name="name"> <span></span> <span></span> <input type="number" name="name"> </div> 

如果要指定比tagName更具體的內容，可以使用Element.prototype.matches ：

 document.querySelectorAll('input').forEach((input) => { input.oninput = function() { let { nextElementSibling } = this; while (nextElementSibling && !nextElementSibling.matches('input[name="foo"]')) { nextElementSibling = nextElementSibling.nextElementSibling; } if (nextElementSibling) { nextElementSibling.focus(); } } }); 

 <div> <input type="number" name="name"> <span></span> <span></span> <span></span> <span></span> <input type="number" name="foo"> <span></span> <input type="number" name="name"> <span></span> <span></span> <input type="number" name="foo"> </div> 

注意使用nextElementSibling而不是nextSibling - nextSibling將選擇相鄰節點 ，而不僅僅是元素。 （例如， nextSibling可以求值為您不關心的文本節點。）如果需要元素，則最好具體化並使用nextElementSibling 。

Answer 2

 <div> <input type="number" tabindex="1" name="name"> <span></span> <span></span> <span></span> <span></span> <input type="number" tabindex="2" name="name"> <span></span> <input type="number" tabindex="3" name="name"> <span></span> <span></span> <input type="number" tabindex="4" name="name"> </div> 

我在此示例中使用的是tabindex ，因為您的問題並未提供任何關於為什么我不能使用它的見解。

Answer 3

您可以創建一個變量並跟蹤當前輸入。 並且每次增加它。 然后集中輸入數組中的下一個輸入。下面是代碼

 let inputs = document.querySelectorAll('input'); let i = 0; inputs.forEach(inp => inp.oninput = () => inputs[i+1] && inputs[++i].focus()) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input type="number" name="name"> <span></span> <input type="number" name="name"> <span></span> <input type="number" name="name"> <span></span> <span></span> <input type="number" name="name"> </div> 

Answer 4

有一個相當簡單的解決方案。 在輸入元素上使用id屬性。 然后，您可以通過驗證功能中的簡單開關自動移至下一個元素。

如：

function validateInput(input){
  //Your validation code
  switch(input.id){
    case'input1':
      document.getElementById('input2').focus();
      break;
    case'input2':
      document.getElementById('input3').focus();
      break;
    case'input3':
      document.getElementById('input4').focus();
      break;
  }
}

<input type='number' name='name' id='input1' onchange='validateInput(this)'>
<input type='number' name='name' id='input2' onchange='validateInput(this)'>

然后，您不必擔心它在文檔中的位置，可以隨時找到它。 您甚至可以從開關內部進行驗證，或將其發送到外部函數，然后在validateInput中繼續，返回非null