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中返回非空值

自动聚焦下一个输入字段

4 个答案: