Javascript 自动聚焦下一个输入字段

如何自动聚焦下一个输入字段

当所有输入字段像这样一个接一个地放置时

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

this.nextSibling.nextSibling.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>

---

要进入下一个输入同级？

您只需在下一个标记名同级中循环，直到找到一个与您要查找的标记名匹配的标记名：

document.queryselector所有'input'。forEachinput=>{ input.oninput=函数{ 设{nextElementSibling}=this； 而nextElementSibling&&nextElementSibling.tagName！==“输入”{ nextElementSibling=nextElementSibling.nextElementSibling； } 如果是nextElementSibling{ nextElementSibling.focus； } } };

---

您可以创建一个变量并跟踪当前输入。每增加一次。然后聚焦输入数组中的下一个输入

让输入=document.queryselectoral'input'； 设i=0； inputs.foreachip=>inp.oninput=>inputs[i+1]&&inputs[+i]。焦点

---

有一个相当简单的解决办法。对输入元素使用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中使用非空返回继续执行验证

嘿，为什么不直接使用tabindex？阅读，因为我的代码的性质，我需要它自动完成。谢谢你的答复。你能给出一个具体的例子或场景吗？它就像一个问答系统，有不止一个问题。如果答案正确，则下一个输入字段应为焦点。而nextElementSibling&&nextElementSibling.tagName！='INPUT“INPUT一词是否需要大写？是的，很遗憾，.tagName属性总是返回大写字符串。当用户有意关注下一项时，tabindex可以工作，而OP希望自动关注下一项，可能是某个事件。你知道自动聚焦下一个tabindex的方法吗？不知道，但我认为你答案的第二部分是我在阅读你的问题时首先想到的。这可能是最直接的。但是，我可能有大约20个输入字段，因此我不想单独说明它们：

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)'>