自动聚焦下一个输入字段

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